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.

Concept Description JavaScript Media query Meta viewport Browsers Physical screen Physical screen The physical number of pixels on the device screen screen.width (old definition) device-width (old definition) - Layout viewport Layout viewport CSS’s initial containing block. Is often set to the ideal viewport. document. document Element. clientWidth and -Height width and height width Visual viewport Visual viewport The current size of the visible part of the page. window. innerWidth and -Height - - Ideal viewport Ideal viewport The ideal layout viewport dimensions that guarantee an optimal experience. screen. width and screen. height device-width and device-height width=device-width Resolution Resolution The ratio between the physical screen size and the ideal viewport size. window. devicePixelRatio resolution - Orientation Orientation The current device orientation: portrait or landscape. window. orientation orientation - Zooming Zooming The zoom factor of the page relative to the ideal viewport. - - *-scale

Currently, many mobile browsers are switching their screen. width definition from the physical number of pixels to the dimensions of the ideal viewport. The latter is considered correct.

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.

More information: