Glavni problem vezan uz promjenu okvira za prikaz HTML-a na veličinu pametnog telefona je taj što može uzrokovati da web-mjesto ne reagira ili se neispravno prikazuje. To je zato što kada se promijeni okvir za prikaz, web-mjesto možda neće biti optimizirano za manju veličinu zaslona i možda neće moći pravilno smanjiti svoj sadržaj. Osim toga, neke značajke možda neće ispravno raditi na manjoj veličini zaslona, poput navigacijskih izbornika ili interaktivnih elemenata.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Ova linija koda je meta oznaka koja pregledniku daje informacije o HTML dokumentu.
2. Atribut imena postavljen je na "viewport", što pregledniku govori da ova oznaka sadrži informacije o tome kako bi stranica trebala biti prikazana na različitim uređajima.
3. Atribut sadržaja postavljen je na "width=device-width, initial-scale=1.0", što pregledniku govori da bi trebao koristiti širinu uređaja kao širinu stranice i skalirati je prema gore ili dolje ako je potrebno.
Odgovarajući web dizajn
Responzivni web dizajn je pristup web dizajnu koji omogućuje da se web stranice dobro prikazuju na različitim uređajima i veličinama prozora ili zaslona. Koristi kombinaciju fleksibilnih mreža i izgleda, slika i inteligentnu upotrebu CSS medijskih upita. Responzivna web-mjesta osmišljena su kako bi pružila optimalno iskustvo gledanja—jednostavno čitanje i navigaciju uz minimalno mijenjanje veličine, pomicanje i pomicanje—na širokom rasponu uređaja (od monitora stolnih računala do mobilnih telefona).
U HTML-u se responzivni dizajn može postići korištenjem sljedećih tehnika:
• Fleksibilne rešetke – Korištenje relativnih jedinica kao što su postoci ili ems umjesto jedinica fiksne širine kao što su pikseli za elemente izgleda omogućuje stranici da se fleksibilno prilagodi različitim veličinama zaslona.
• Medijski upiti – CSS3 medijski upiti omogućuju programerima određivanje različitih stilova za različite širine uređaja. To omogućuje prilagodbu izgleda stranice ovisno o uređaju koji se koristi.
• Responzivne slike – Slike se mogu učiniti responzivnima korištenjem atributa srcset u HTML5 koji omogućuje razvojnim programerima da specificiraju više verzija slike u različitim rezolucijama za različite uređaje.
• Fleksibilni videozapisi – Videozapisi se također mogu učiniti responzivnim korištenjem svojstva prilagodbe objekta u CSS-u koje programerima omogućuje određivanje veličine videozapisa unutar svojih spremnika ovisno o njihovoj veličini.
Meta oznaka vidnog polja
Meta oznaka okvira za prikaz je HTML element koji govori pregledniku kako prilagoditi dimenzije i skaliranje stranice da bi odgovaralo uređaju koji se koristi. Koristi se za kontrolu izgleda web stranice na različitim uređajima, poput pametnih telefona i tableta. Meta oznaka okvira za prikaz može se koristiti za postavljanje širine web-stranice, povećanje ili smanjenje njezine veličine i određivanje smiju li korisnici povećavati ili smanjivati. Također se može koristiti za postavljanje početne skale, maksimalne skale, korisnički skalabilnih svojstava i više.
Kako da moja web stranica odgovara ekranu mog telefona
Kako bi web stranica odgovarala zaslonu telefona u HTML-u, možete upotrijebiti meta oznaku okvira prikaza. Ova vam oznaka omogućuje kontrolu načina na koji se vaša web stranica prikazuje na različitim uređajima. Možete postaviti širinu okvira za prikaz da bude jednaka širini uređaja, tako da će vaša web stranica automatski prilagoditi svoju veličinu kako bi odgovarala zaslonu bilo kojeg uređaja. Osim toga, također možete koristiti medijske upite u svom CSS kodu kako biste dodatno prilagodili kako vaša web stranica izgleda na različitim uređajima.
