Galvenā problēma, kas saistīta ar HTML skata loga maiņu uz viedtālruņa izmēru, ir tā, ka vietnes var nereaģēt vai parādīties nepareizi. Tas ir tāpēc, ka, mainot skata logu, vietne var nebūt optimizēta mazākam ekrāna izmēram un, iespējams, nevarēs pareizi samazināt tās saturu. Turklāt dažas funkcijas var nedarboties pareizi mazākā ekrānā, piemēram, navigācijas izvēlnes vai interaktīvie elementi.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Šī koda rindiņa ir metatags, kas pārlūkprogrammai sniedz informāciju par HTML dokumentu.
2. Atribūts name ir iestatīts uz “viewport”, kas norāda pārlūkprogrammai, ka šis tags satur informāciju par to, kā lapa ir jāparāda dažādās ierīcēs.
3. Content atribūts ir iestatīts uz “width=device-width, original-scale=1.0”, kas norāda pārlūkprogrammai, ka tai ir jāizmanto ierīces platums kā lapas platums un, ja nepieciešams, tas jāpalielina vai jāsamazina.
Atsaucīgs Web dizains
Adaptīvs tīmekļa dizains ir pieeja tīmekļa dizainam, kas ļauj tīmekļa lapām labi atveidot dažādas ierīces un logu vai ekrānu izmērus. Tas izmanto elastīgu režģu un izkārtojumu, attēlu un CSS multivides vaicājumu inteliģentas izmantošanas kombināciju. Adaptīvās vietnes ir izstrādātas tā, lai nodrošinātu optimālu skatīšanās pieredzi — vieglu lasīšanu un navigāciju ar minimālu izmēru maiņu, panoramēšanu un ritināšanu — dažādās ierīcēs (no galddatoru monitoriem līdz mobilajiem tālruņiem).
HTML formātā adaptīvu dizainu var panākt, izmantojot šādas metodes:
• Elastīgi režģi — izmantojot relatīvās vienības, piemēram, procentus vai ems, nevis fiksēta platuma vienības, piemēram, pikseļus izkārtojuma elementiem, lapa var elastīgi pielāgoties dažādiem ekrāna izmēriem.
• Multivides vaicājumi — CSS3 multivides vaicājumi ļauj izstrādātājiem norādīt dažādus stilus dažādiem ierīču platumiem. Tas ļauj lapas izkārtojumu atbilstoši pielāgot atkarībā no izmantotās ierīces.
• Adaptīvi attēli — attēlus var padarīt atsaucīgus, izmantojot HTML5 atribūtu srcset, kas ļauj izstrādātājiem norādīt vairākas attēla versijas ar atšķirīgu izšķirtspēju dažādām ierīcēm.
• Elastīgi videoklipi — videoklipus var arī padarīt adaptīvus, izmantojot CSS objekta ietilpības rekvizītu, kas ļauj izstrādātājiem norādīt, kā videoklipiem ir jābūt mērogojamiem konteineros atkarībā no to lieluma.
Viewport metatags
Skatvietas metatags ir HTML elements, kas pārlūkprogrammai norāda, kā pielāgot lapas izmērus un mērogošanu, lai tas atbilstu izmantotajai ierīcei. To izmanto, lai kontrolētu, kā tīmekļa lapa izskatās dažādās ierīcēs, piemēram, viedtālruņos un planšetdatoros. Skatvietas metatagu var izmantot, lai iestatītu tīmekļa lapas platumu, palielinātu vai samazinātu to mērogošanu un norādītu, vai lietotājiem ir atļauts tuvināt vai tālināt. To var arī izmantot, lai iestatītu sākotnējo mērogu, maksimālo mērogu, lietotāja mērogojamus rekvizītus un daudz ko citu.
Kā izveidot vietni, lai tā atbilstu mana tālruņa ekrānam
Lai vietne būtu piemērota tālruņa ekrānam HTML formātā, varat izmantot skatvietas metatagu. Šis tags ļauj kontrolēt, kā jūsu vietne tiek rādīta dažādās ierīcēs. Varat iestatīt skata loga platumu, lai tas būtu vienāds ar ierīces platumu, lai jūsu vietne automātiski pielāgotu tā lielumu, lai tas atbilstu jebkuras ierīces ekrānam. Turklāt CSS kodā varat izmantot arī multivides vaicājumus, lai vēl vairāk pielāgotu vietnes izskatu dažādās ierīcēs.
