window.innerWidth vs document.documentElement.clientWidth

Question

En cuanto window.innerWidth y document.documentElement.clientWidth,

1. Webkit (Chrome/Safari) afirma innerWidth es más pequeño que clientWidth.

2. Trident and Presto solicitud innerWidth es mayor que clientWidth.

3. Gecko claims innerWidth es del mismo tamaño que clientWidth.

¿Cuál es la correcta comportamiento declarado por W3C (o silimar "autoridad")?

script de prueba (on JSFiddle) (en GoogleHost):

setInterval(function() { 
 
    var inner_w = window.innerWidth; 
 
    var inner_h = window.innerHeight; 
 
    var client_w = document.documentElement.clientWidth; 
 
    var client_h = document.documentElement.clientHeight; 
 
    var debug_msg = "inner: " + inner_w + "-" + inner_h + "<br>client: " + client_w + "-" + client_h; 
 
    document.getElementById("d").innerHTML = debug_msg; 
 
    document.title = debug_msg; 
 
    document.body.style.background = (client_w === inner_w && client_h === inner_h ? "green" : "red"); 
 
}, 60);

<div id="d"></div>

(Ejecutar el fragmento en modo de página completa y poco maximizar o "restaurar" la ventana Observar debug_msg. mientras arrastra el borde de la ventana para cambiar su tamaño.)

Answer 1

De acuerdo con el W3C specification (17 de marzo de 2016):

El atributo innerWidth debe devolver el ancho de la ventana gráfica incluyendo el tamaño de una barra de desplazamiento mostrada (si existe), o cero si no hay ventana gráfica.

...

El atributo clientWidth debe ejecutar estos pasos:

1. Si el elemento no tiene una caja de diseño CSS asociada o si el cuadro de diseño CSS es en línea, retorno a cero.
2. Si el elemento es el elemento raíz y el documento del elemento no está en modo peculiar, o si el elemento es HTML y el documento está en modo peculiar, devuelve el ancho de ventana excluyendo el tamaño de una barra de desplazamiento representada (Si alguna).
3. Devuelve el ancho del borde de relleno, excluyendo el ancho de cualquier barra de desplazamiento entre el borde de relleno y el borde, ignorando las transformaciones que se apliquen al elemento y sus antepasados.

Answer 2

estoy usando esto:

window.innerWidth && document.documentElement.clientWidth ? 
Math.min(window.innerWidth, document.documentElement.clientWidth) : 
window.innerWidth || 
document.documentElement.clientWidth || 
document.getElementsByTagName('body')[0].clientWidth; 

Se cubre hasta los casos en que la barra de desplazamiento no está tomando en cuenta y tiene soporte móvil.