Problem sa mobilnim browserima
U usporedbi sa desktop browserima kod mobilnih se javljaju slijedeći problemi:- sitan, nečitljiv text
- odsječen text, tj. prikaz samo jednog dijela teksta
Dve vrste viewporta
Postoje dvije vrste viewporta:- layout viewport - definiran sa <html> tagom
- visual viewport - definiran dimenzijama ekrana
Zoomiranje
Ako su layout i visual viewportovi jednaki onda je zoom =1.
Mjerenja (pomoću Javascript funkcija)
Mjerenje Layout Viewportadocument.documentElement.clientWidth i document.documentElement.clientHeight
window.innerWidth i window.innerHeight
Mjerenje Visual Viewporta
screen.width i screen.height
Viewport meta tag
Kako bi se izbjegle nekompatibilnosti pri mjerenju Javascriptom uveden je novi meta viewport tag. Iako još nije službeno uveden koriste ga već mnogi browseri.<meta name="viewport" content="width=device-width, initial-scale=1">
Viewport direktive
width= 600 | device-width - Određuje širinu layout viewporta. Može biti u pixelima ili kao device-width.
height= 600 | device-height - Određuje visinu layout viewporta. Može biti u pixelima ili kao device-height.
initial-scale=1 - Definira zoom pri učitavanju stranice. Ako je postavljen na 1 onda je layout viewport=visual viewport.
maximum-scale=2 - Definira maximalni zoom koji korisnik može napraviti.
minimum-scale=0.3 - Definira minimalni zoom koji korisnik može napraviti.
user-scalable=yes | no - Ako je postavljeno na no korisnik ne može zoomirati.
Relacija
initial-scale=device-width / width
Pri tome je device-width širina ekrana uređaja, a width je definiran u viewport meta tagu.
Mogući konflikti
Pri definiranju viewport direktivi mogući su i konflikti, npr. kod
<meta name="viewport" content="width=400, initial-scale=1">
ako učitavamo stranicu u Iphone(320x480px) dešava se konflikt iz razloga što initial-scale=1 učitava 480px odnosno 320px. Istovremeno direktiva width=400 govori mu da učita 400px pa se dešava konflikt te dve direktive.
Primjeri
Primjer - Pokazati da ako u jednom fajlu stavimo width=1800 , a u drugom initial-scale=0.26 da će onda u Iphone landsacpe
prikazu, stranice biti isto prikazane. To je zato jer je initial-scale=device-width/width = 480px/1800px = 0.26:
width=1800
vidi code
» vidi stranicu
initial-scale=0.26
vidi code
» vidi stranicu
Primjer - Pomoću JS funkcija izmjeriti layout i visual viewport.
vidi code
» vidi stranicu
Rješenje1: Ako stavimo width=1800 onda će layout viewport (document.documentElement.clientWidth) dati 1800, dok će
visual viewport (screen.width) dati 320 pri portrait prikazu Iphona. Slova su jako umanjena u tom slučaju (zoomin).
Rješenje2: Ako pak stavimo initial-scale=0.5 onda će layout dati 640 dok će visual dati 320.
Rješenje3: Ako pak stavimo initial-scale=0.1 onda će layout dati 1280 dok će visual dati 320. To
znači da Iphone ima predefinirano ograničenje zooma tj. minimum-scale na 320/1280=0.25 i ispod toga ne može.
Rješenje4: Ako stavimo initial-scale=1 ili width=device-width onda će i layout i visual biti isti tj. 320px.
Rješenje5: Ako stavimo width=100 onda će layout biti 100, a visual 320. Ujedno će slova biti povećana (zoomout).
Primjer - Razne kombinacije sa viewport width i body width:
body width=160 ; viewport width = device-width (u Iphone-u layout je 1/2 od visuala, u desktopu je layout samo 160px širok)
vidi code
» vidi stranicu
body width=50% ; viewport width = device-width (u Iphone-u layout je 1/2 od visuala, a u desktopu je layout je također 1/2 visuala)
vidi code
» vidi stranicu
Primjer - Postaviti viewport=device-width , body na 50% i button unutar body-ja na 33%.
Pratiti kako se mijenjaju omjeri pri promjeni širine browserovog prozora:
vidi code
» vidi stranicu