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.documentElement.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: