This table gives quick overview of the viewport-related concepts in the mobile browsers. Since it’s a quick overview, many details are lost. Browser situation as of November 2013 in the latest official versions of the indicated browsers.
|Physical screen||The physical number of pixels on the device screen||screen.width (old definition)||device-width (old definition)||-|
|Layout viewport||CSS’s initial containing block. Is often set to the ideal viewport.||document.
||width and height||width|
|Visual viewport||The current size of the visible part of the page.||window.
|Ideal viewport||The ideal layout viewport dimensions that guarantee an optimal experience.||screen.
||device-width and device-height||width=device-width|
|Resolution||The ratio between the physical screen size and the ideal viewport size.||window.
|Orientation||The current device orientation: portrait or landscape.||window.
|Zooming||The zoom factor of the page relative to the ideal viewport.||-||-||*-scale|
Currently, many mobile browsers are switching their
screen. definition from
the physical number of pixels to the dimensions of the ideal viewport. The latter is considered
All WebKit-based browsers require the -webkit-device-pixel-ratio media query instead of resolution. As far as I can see the latter is going to win out, and it is considered correct.
Meta viewport initial-scale also sets the layout viewport to the (zoomed) dimensions of the ideal viewport.