display-size: obtener las medidas y resolución de la pantalla del dispositivo en dpi

El cuadrado gris debería medir exactamente una pulgada de alto y de ancho, y su color depende de la hojas de estilo que esé seleccionada, según la siguiente leyenda:

 Tamaño de monitor grande, tal y como el de un ordenador personal.
 Tamaño de pantalla semejante a la de un tablet.
 Tamaño de pantalla semejante a la de un terminal de mano.
body.style.fontSize:
window.orientation:
window.devicePixelRatio:
window.screen:
window.innerXxx:
window.outerXxx:
document.body.clientWidth:
document.body.offsetWidth:
document.body.scrollWidth:
dpiScreen[x,y]:[,] dpi
screen (mm):
screen (CSS pixel):
orientation:
device:
dpiDevice[x,y]:[,] dpi
devicePixelRatio:
dpi[x,y]:[,] dpi
Factor dpi dispositivo / dpi layout:
Medidas de la pantalla del dispositivo:
Medidas de la ventana del dispositivo:
Tamaño de paso a modo tablet:No soportado
Tamaño de paso a modo móvil:No soportado
Medida utilizada para el cambio de modo:
(Utilizado en el media query)

Referencias

Valores obtenidos en casos reales

NokiaN9; NokiaBrowser/8.5.0; AppleWebKit/534.13
Nokia N9
window.orientation:0
window.devicePixelRatio:1.5 | 1
window.screen:320x569px | 480x854px
window.innerXxx:320x496px | 480x744px
window.outerXxx:0x0px
document.body.clientWidth:304px | 464px
document.body.offsetWidth:304px | 464px
document.body.scrollWidth:320px | 480px
dpiScreen[x,y]:[96,96] dpi

No hay forma de conocer la dimensión del viewport del navegador, y el parámetro window.orientation parece valer siempre 0, independientemente de como ponga el dispositivo.

Se aportan dos mediciones, en función de que pongamos <meta name="viewport" content="(...),target-densitydpi=device-dpi">

Maemo; Mobile; Firefox/15.0; Gecko/20120829
Nokia N9
window.orientation:undefined
window.devicePixelRatio:undefined
window.screen:854x480px
window.innerXxx:480x854px
window.outerXxx:480x854px
document.body.clientWidth:464px
document.body.offsetWidth:464px
document.body.scrollWidth:464px
dpiScreen[x,y]:[96,96] dpi

En este navegador no hay ningún dato relativo a la orientación y a las dimensiones reales del dispositivo. La única forma de adaptar el contenido al mismo es detectar el navegador en sí mismo y coger los valores adecuados para el mismo.

El valor de window.screen se da en modo apaisado/horizontal debido a que es una recompilación del código de Fennec desarrollado para el Nokia N900, cuyo formato "estándar" era horizontal.

U; Android 4.2.2; VirtualBox; Build/JDQ39; AppleWebKit/534.30; Mobile
window.orientation:0
window.devicePixelRatio:0.81
window.screen:800x600px
window.innerXxx:988x546px | 800x442px
window.outerXxx:800x481px
document.body.clientWidth:972px | 784px
document.body.offsetWidth:972px | 784px
document.body.scrollWidth:988px | 800px
dpiScreen[x,y]:[96,96] dpi

U; Android 2.2.2; eeepc; Build/FRG83G; AppleWebKit/533.1; Mobile
window.orientation:0
window.devicePixelRatio:1.5
window.screen:533x375px | 800x478px
window.innerXxx:533x375px | 800x478px
window.outerXxx:800x562px
document.body.clientWidth:517px | 784px
document.body.offsetWidth:517px | 784px
document.body.scrollWidth:533px | 800px
dpiScreen[x,y]:[96,96] dpi

Android-x86 2.2 permite iniciar en modo HDPI o MDPI (High o Medium DPI). Se ha hecho la prueba en modo HDPI. En modo MDPI el valor devicePixelRatio es 1.

N900; Maemo Browser/1.7.4.8; Firefox/3.5; Gecko/20100723
Nokia N900
window.orientation:undefined
window.devicePixelRatio:undefined
window.screen:480x800px
window.innerXxx:480x730px
window.outerXxx:480x730px
document.body.clientWidth:464px
document.body.offsetWidth:464px
document.body.scrollWidth:464px
dpiScreen[x,y]:[96,96] dpi

No existe ningún valor que de una pista del tamaño del viewport, que será 1.

Maemo; Fennec/4.0; Firefox/4.0
Nokia N900
window.orientation:undefined
window.devicePixelRatio:undefined
window.screen:480x800px
window.innerXxx:320x533px
window.outerXxx:
document.body.clientWidth:
document.body.offsetWidth:
document.body.scrollWidth:
dpiScreen[x,y]:[96,96] dpi

Utiliza un devicePixelRatio de 1.5 que podemos detectar como la relación width/innerWidth.

Nexus 4; Android 4.2.2; Build/JDQ39; Mobile; AppleWebKit/537.36
LG Nexus 4
window.orientation:0|90|180|-90
window.devicePixelRatio:2
window.screen:384x592px
window.innerXxx:384x567px
window.outerXxx:384x519px
document.body.clientWidth:368px
document.body.offsetWidth:384px
document.body.scrollWidth:384px
dpiScreen[x,y]:[96,96] dpi

Android; Mobile; Firefox/21.0; Gecko/21.0
LG Nexus 4
window.orientation:undefined
window.devicePixelRatio:1
window.screen:768x1184px
window.innerXxx:384x519px
window.outerXxx:768x1038px
document.body.clientWidth:368px
document.body.offsetWidth:368px
document.body.scrollWidth:368px
dpiScreen[x,y]:[96,96] dpi

La variable devicePixelRatio está informada como 1. Esto es congruente con el hecho de que screen informa de la resolución en pixels de dispositivo. Sin embargo, a la hora de mostrar el contenido una relación entre pixels css y pixels físicos de 1.5, que puede calcularse como la relación width/innerWidth.

Las variables innerXxx están informadas en pixels CSS, mientras que outerXxx están informadas en pixels de dispositivo.

Desire_A8181; Android 2.2.2; Build/FRG83G; AppleWebKit/533.1; Mobile
HTC Desire A8181
window.orientation:0|90
window.devicePixelRatio:1.5
window.screen:320x533px | 480x800px
window.innerXxx:320x533px | 480x800px
window.outerXxx:480x800px
document.body.clientWidth:304px | 464px
document.body.offsetWidth:304px | 464px
document.body.scrollWidth:320px | 480px
dpiScreen[x,y]:[96,96] dpi

La variable devicePixelRatio está bien informada

y7053; Android 4.1.1; Build/JRO03H; AppleWebKit/537.36
Gemini Duo 7
window.orientation:0|90|180|-90
window.devicePixelRatio:1
window.screen:1024x552px
window.innerXxx:1024x465px
window.outerXxx:1024x465px
document.body.clientWidth:1008px
document.body.offsetWidth:1008px
document.body.scrollWidth:1024px
dpiScreen[x,y]:[96,96] dpi

iPad; Mobile/8F191; AppleWebKit/533.17.9
Gemini Duo 7
window.orientation:0|90|180|-90
window.devicePixelRatio:1
window.screen:1024x600px
window.innerXxx:1024x496px
window.outerXxx:1024x496px
document.body.clientWidth:1008px
document.body.offsetWidth:1008px
document.body.scrollWidth:1024px
dpiScreen[x,y]:[96,96] dpi

Android; Tablet; Firefox/21.0; Gecko/21.0
Gemini Duo 7
window.orientation:undefined
window.devicePixelRatio:1
window.screen:1024x552px
window.innerXxx:1024x496px
window.outerXxx:1024x496px
document.body.clientWidth:1008px
document.body.offsetWidth:1008px
document.body.scrollWidth:1008px
dpiScreen[x,y]:[96,96] dpi

Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MOB30M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.02704.81 Mobile Safari/537.36
Nexus 5
window.orientation:0|90|-90
window.devicePixelRatio:3
window.screen:360x640px
window.innerXxx:360x568px
window.outerXxx:360x568px
document.body.clientWidth:344px
document.body.offsetWidth:344px
document.body.scrollWidth:360px
dpiScreen[x,y]:[96,96] dpi