Glavna težava, povezana s spreminjanjem vidnega polja HTML na velikost pametnega telefona, je, da lahko povzroči, da se spletno mesto ne odziva ali prikaže nepravilno. To je zato, ker ob spremembi vidnega polja spletno mesto morda ne bo optimizirano za manjšo velikost zaslona in morda ne bo moglo ustrezno zmanjšati svoje vsebine. Poleg tega nekatere funkcije morda ne bodo delovale pravilno na manjšem zaslonu, na primer navigacijski meniji ali interaktivni elementi.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Ta vrstica kode je meta oznaka, ki brskalniku posreduje informacije o dokumentu HTML.
2. Atribut imena je nastavljen na »viewport«, kar brskalniku pove, da ta oznaka vsebuje informacije o tem, kako naj bo stran prikazana na različnih napravah.
3. Atribut vsebine je nastavljen na »width=device-width, initial-scale=1.0«, kar brskalniku pove, da mora uporabiti širino naprave kot širino strani in jo po potrebi povečati ali zmanjšati.
Odziven spletni dizajn
Odzivno spletno oblikovanje je pristop k spletnemu oblikovanju, ki omogoča dobro upodabljanje spletnih strani na različnih napravah in velikostih oken ali zaslonov. Uporablja kombinacijo prilagodljivih mrež in postavitev, slik in inteligentne uporabe medijskih poizvedb CSS. Odzivna spletna mesta so zasnovana tako, da zagotavljajo optimalno izkušnjo gledanja – enostavno branje in krmarjenje z minimalnim spreminjanjem velikosti, premikanjem in drsenjem – v širokem naboru naprav (od monitorjev namiznih računalnikov do mobilnih telefonov).
V HTML je odzivno oblikovanje mogoče doseči z uporabo naslednjih tehnik:
• Prilagodljive mreže – uporaba relativnih enot, kot so odstotki ali ems, namesto enot s fiksno širino, kot so slikovne pike, za elemente postavitve omogoča, da se stran prilagodljivo prilagaja različnim velikostim zaslona.
• Medijske poizvedbe – medijske poizvedbe CSS3 omogočajo razvijalcem, da določijo različne sloge za različne širine naprav. To omogoča, da se postavitev strani ustrezno prilagodi glede na uporabljeno napravo.
• Odzivne slike – slike lahko postanejo odzivne z uporabo atributa srcset v HTML5, ki razvijalcem omogoča, da določijo več različic slike v različnih ločljivostih za različne naprave.
• Prilagodljivi videoposnetki – Videoposnetke je mogoče narediti tudi odzivne z uporabo lastnosti prileganja objektov v CSS, ki razvijalcem omogoča, da določijo, kako naj se videoposnetki spreminjajo v svojih vsebnikih glede na njihovo velikost.
Metaoznaka vidnega polja
Metaoznaka vidnega polja je element HTML, ki brskalniku pove, kako naj prilagodi dimenzije in velikost strani, da bo ustrezala napravi, ki jo uporabljate. Uporablja se za nadzor nad tem, kako je spletna stran videti na različnih napravah, kot so pametni telefoni in tablični računalniki. Metaoznaka vidnega polja se lahko uporablja za nastavitev širine spletne strani, njeno povečanje ali zmanjšanje in določitev, ali je uporabnikom dovoljeno povečati ali pomanjšati ali ne. Uporablja se lahko tudi za nastavitev začetnega obsega, največjega obsega, lastnosti, ki jih lahko prilagodi uporabnik, itd.
Kako naj se moje spletno mesto prilega zaslonu telefona
Če želite spletno mesto prilagoditi zaslonu telefona v HTML, lahko uporabite metaoznako vidnega polja. Ta oznaka vam omogoča nadzor nad tem, kako je vaše spletno mesto prikazano na različnih napravah. Širino vidnega polja lahko nastavite tako, da je enaka širini naprave, tako da bo vaše spletno mesto samodejno prilagodilo svojo velikost glede na zaslon katere koli naprave. Poleg tega lahko uporabite tudi medijske poizvedbe v kodi CSS, da dodatno prilagodite, kako izgleda vaše spletno mesto v različnih napravah.
