Peamine probleem, mis on seotud HTML-i vaateava muutmisega nutitelefoni suuruseks, on see, et see võib põhjustada veebisaidi reageerimise või valesti kuvamise. Selle põhjuseks on asjaolu, et vaateava muutmisel ei pruugi veebisait olla optimeeritud väiksema ekraanisuuruse jaoks ja ei pruugi olla võimalik selle sisu korralikult vähendada. Lisaks ei pruugi mõned funktsioonid (nt navigeerimismenüüd või interaktiivsed elemendid) väiksema ekraaniga õigesti töötada.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. See koodirida on metasilt, mis annab brauserile teavet HTML-dokumendi kohta.
2. Nime atribuudiks on seatud "viewport", mis annab brauserile teada, et see silt sisaldab teavet selle kohta, kuidas lehte erinevates seadmetes kuvatakse.
3. Sisu atribuudiks on seatud “width=device-width, original-scale=1.0”, mis ütleb brauserile, et ta peaks kasutama lehe laiuseks seadme laiust ja vajadusel seda sealt üles või alla skaleerima.
Vastuväide Web Design
Responsiivne veebidisain on lähenemine veebidisainile, mis muudab veebilehed hästi renderdatavaks erinevates seadmetes ja akna- või ekraanisuuruses. See kasutab paindlike võrgustike ja paigutuste, piltide ja CSS-meediumipäringute intelligentse kasutamise kombinatsiooni. Reageerivad veebisaidid on loodud pakkuma optimaalset vaatamiskogemust – lihtsat lugemist ja navigeerimist minimaalse suuruse muutmise, panoraamimise ja kerimisega – paljudes seadmetes (alates lauaarvutite monitoridest ja lõpetades mobiiltelefonidega).
HTML-is saab tundliku disaini saavutada järgmiste tehnikate abil.
• Paindlikud ruudustikud – suhteliste ühikute (nt protsendid või ems) kasutamine fikseeritud laiusega ühikute (nt pikslid) asemel paigutuselementide jaoks võimaldab lehe paindlikult kohaneda erinevate ekraanisuurustega.
• Meediumipäringud – CSS3 meediapäringud võimaldavad arendajatel määrata erinevatele seadmelaiustele erinevaid stiile. See võimaldab lehe paigutust vastavalt kasutatavale seadmele kohandada.
• Tundlikud pildid – pilte saab muuta tundlikuks, kasutades HTML5-s atribuuti srcset, mis võimaldab arendajatel määrata pildi mitu versiooni erinevate seadmete jaoks erineva eraldusvõimega.
• Paindlikud videod – videoid saab muuta ka tundlikuks, kasutades CSS-is objekti sobivuse atribuuti, mis võimaldab arendajatel määrata, kuidas videod mahutites skaleeruvad olenevalt nende suurusest.
Vaateava metasilt
Vaateava metasilt on HTML-i element, mis annab brauserile teada, kuidas kohandada lehe mõõtmeid ja skaleerimist vastavalt kasutatavale seadmele. Seda kasutatakse veebilehe väljanägemise kontrollimiseks erinevates seadmetes, näiteks nutitelefonides ja tahvelarvutites. Vaateava metasilti saab kasutada veebilehe laiuse määramiseks, selle suurendamiseks või vähendamiseks ning määramiseks, kas kasutajatel on lubatud sisse või välja suumida või mitte. Seda saab kasutada ka algskaala, maksimaalse ulatuse, kasutaja skaleeritavate omaduste ja muu määramiseks.
Kuidas muuta oma veebisait telefoni ekraanile sobivaks
Veebisaidi HTML-vormingus telefoniekraanile sobitamiseks saate kasutada vaateava metasilti. See silt võimaldab teil juhtida seda, kuidas teie veebisaiti erinevates seadmetes kuvatakse. Saate määrata vaateava laiuse võrduma seadme laiusega, nii et teie veebisait kohandab selle suurust automaatselt, et see sobiks mis tahes seadme ekraaniga. Lisaks saate oma CSS-koodis kasutada ka meediapäringuid, et veelgi kohandada, kuidas teie veebisait erinevates seadmetes välja näeb.
