Glavni problem u vezi s promjenom HTML okvira prikaza na veličinu pametnog telefona je taj što može uzrokovati da web stranica ne reagira ili se prikazuje nepravilno. To je zato što kada se promijeni okvir za prikaz, web stranica možda neće biti optimizirana za manju veličinu ekrana i možda neće moći pravilno smanjiti svoj sadržaj. Osim toga, neke funkcije možda neće raditi ispravno na manjoj veličini ekrana, kao što su navigacijski meniji ili interaktivni elementi.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Ova linija koda je meta oznaka, koja pretraživaču pruža informacije o HTML dokumentu.
2. Atribut name je postavljen na “viewport”, što govori pretraživaču da ova oznaka sadrži informacije o tome kako bi stranica trebala biti prikazana na različitim uređajima.
3. Atribut sadržaja je postavljen na “width=device-width, initial-scale=1.0”, što govori pretraživaču da treba da koristi širinu uređaja kao širinu stranice i da je poveća ili smanji odatle ako je potrebno.
Odgovarajući web dizajn
Responzivni web dizajn je pristup web dizajnu koji čini da se web stranice dobro prikazuju na različitim uređajima i veličinama prozora ili ekrana. Koristi kombinaciju fleksibilnih mreža i rasporeda, slika i inteligentnu upotrebu CSS medijskih upita. Responzivne web stranice su dizajnirane da pruže optimalno iskustvo gledanja—lako čitanje i navigaciju uz minimalno mijenjanje veličine, pomicanje i pomicanje—na širokom rasponu uređaja (od monitora desktop računara do mobilnih telefona).
U HTML-u se responzivni dizajn može postići korištenjem sljedećih tehnika:
• Fleksibilne mreže – Korišćenje relativnih jedinica kao što su procenti ili ems umesto jedinica fiksne širine kao što su pikseli za elemente izgleda omogućava da se stranica fleksibilno prilagodi različitim veličinama ekrana.
• Medijski upiti – CSS3 medijski upiti omogućavaju programerima da specificiraju različite stilove za različite širine uređaja. Ovo omogućava da se izgled stranice u skladu s tim prilagodi ovisno o uređaju koji se koristi.
• Responzivne slike – Slike se mogu učiniti responzivnim korištenjem atributa srcset u HTML5 koji omogućava programerima da specificiraju više verzija slike u različitim rezolucijama za različite uređaje.
• Fleksibilni video zapisi – Video zapisi se takođe mogu učiniti prilagodljivim korišćenjem svojstva uklapanja objekta u CSS-u koje omogućava programerima da navedu kako video zapisi treba da se skaliraju unutar svojih kontejnera u zavisnosti od njihove veličine.
Meta tag okvira prikaza
Meta oznaka viewporta je HTML element koji govori pretraživaču kako da prilagodi dimenzije i skaliranje stranice kako bi odgovarao uređaju koji se koristi. Koristi se za kontrolu kako web stranica izgleda na različitim uređajima, kao što su pametni telefoni i tableti. Meta oznaka viewport-a može se koristiti za postavljanje širine web stranice, povećanje ili smanjenje veličine i specificiranje da li je korisnicima dozvoljeno da uvećavaju ili umanjuju. Također se može koristiti za postavljanje početne skale, maksimalne razmjere, korisnički skalabilnih svojstava i još mnogo toga.
Kako da svoju web stranicu prilagodim ekranu mog telefona
Da biste web stranicu prilagodili ekranu telefona u HTML-u, možete koristiti meta oznaku okvira za prikaz. Ova oznaka vam omogućava da kontrolirate kako 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 tako da odgovara ekranu bilo kojeg uređaja. Osim toga, možete koristiti i medijske upite u svom CSS kodu da dodatno prilagodite kako vaša web stranica izgleda na različitim uređajima.
