Very useful readings are A tale of two viewports — part one, A tale of two viewports — part two, devicePixelRatio, More about devicePixelRatio, Using the viewport meta tag to control layout on mobile browsers (MDN) and Configuring the Viewport for iOS which explain how to set and use this tag correctly. To completely understand effect of this tag I decided to test few different variations and compare results.
Measured properties:
screen.width/height - contain the total width and height of the user's screen and are measured in device pixels; they never change. Nexus 4 display resolution is 768 x 1280 but as we can see screen.width x height are 384 x 592.
window.innerWidth/Height - tells how much space the user currently has available for CSS layout and is measured in CSS pixels.
On mobile devices visual viewport is measured by
window.innerWidth/Height. Obviously the measurements change when the user zooms out or in.
document.documentElement.clientWidth/Height - dimensions of the viewport, regardless of the dimensions of the <html> element (viewport is one level higher than <html> element). There's a formal difference between the two property pairs: document.documentElement.clientWidth/Height doesn’t include the scrollbar.
On mobile devices those properties contain the layout viewport’s dimensions. How wide is default layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.
document. documentElement. offsetWidth/Height - tells dimensions of the <html> element itself, measured in CSS pixels.
On mobile devices those properties have the same meaning, total size of <html> element.
Examples
Testing device used was Nexus 4 with Chrome 30. Screen resolution of nexus 4 is 768x1280. Its higher than iPhone 4s (640x960) and even higher than iPhone 5x (640x1136).
no viewport tag:
screen 384 / 592
inner 980 / 1325
client 980 / 1324
offset 980 / 3208
dpr 2
<meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
screen 384 / 592
inner 980 / 1325
client 384 / 519
offset 384 / 2830
dpr 2
<meta name="viewport" content="width=device-width">
screen 384 / 592
inner 384 / 519
client 384 / 519
offset 384 / 2830
dpr 2
<meta name="viewport" content="initial-scale=1.0">
screen 384 / 592
inner 598 / 311
client 384 / 519
offset 384 / 2830
dpr 2
landscape:
screen 598 / 384
inner 598 / 311
client 598 / 311
offset 598 / 2117
dpr 2
<meta name="viewport" content="initial-scale=2.0">
screen 384 / 592
inner 192 / 260
client 192 / 259
offset 192 / 7703
dpr 2
<meta name="viewport" content="width=590">
screen 384 / 592
inner 590 / 798
client 590 / 797
offset 590 / 2617
dpr 2
Problems:
position: fixed. A fixed element, as we know, is positioned relative to the viewport. But relative to which viewport...layout or visual?
