It's wet and dant outside. Rain drops are hitting wooden stairs of IS house, irritating hIS nervous sleep. M-queries deeds can't leave his mind and he struggles unweaving nets of the crime.
Suddenly he opens his eyes full of joy and self relief. He has just got the idea what's going on...
The viewport is the user's visible area of a web page.
Well, seems there is no any problems. Just add media queries and everything will work like a charm!
Layout viewport has its size. That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.
applies only some media queries more than 800-900px ?
Not working as expected?
browsers have chosen their dimensions of the layout viewport such that it completely covers the screen in fully zoomed-out mode (and is thus equal to the visual viewport).
something went wrong
equals layout viewport to visual viewport. controls zooming.
width - any value in pixels corresponding the window width. or special value - device-width
height - any value in pixels corresponding the window height. or special value - device-height
width | height
initial-scale - value can be 0.1 - 10.
minimum-scale - value can be 0.1 - 10.
maximum-scale - value can be 0.1 - 10.
provides the ability to zoom. The value can be 'yes' or 'no'. The default value is - 'yes'
for layout we use css pixels. it has nothing to do with device physical pixels. Why? - well, nowadays even really small devices can have really high resolution, so it's impossible to diviate the devices by their physical resolution and use this resolution in layout purposes.
let's try to calculate css resolution for iphone 6:
resolution- 750x1334, pixels density - 326ppi.
remember the data
define css coefficient
< 200ppi 1
200 - 300ppi 1.5
> 300ppi density / 150
density css coeff
note : round to 2, 2.5, 3, 3.5 e.t.c
326ppi > 300 ppi
326 / 150 = 2.2 (Round to 2)
css coefficient - 2
width: 750 / 2 = 375
height: 1344 / 2 = 672
css resolution: 375X672
LG G4: resolution - 1440x2560, pixels density - 538ppi.
Galaxy S3 mini: resolution - 480x800, pixels density - 233ppi.
iPhone 3: resolution - 320x480, pixels density - 163ppi.
Galaxy S5: resolution - 1080x1920, pixels density - 441ppi.
time to relax
Yay ! we've just revealed an adaptivity crime. congratulations guys!
so now we have some free minutes to relax, gain more strength and enthusiasm, and continue our investigations....