window.innerWidth vs document.documentElement.clientWidth

Question

En ce qui concerne window.innerWidth et document.documentElement.clientWidth,

1. Webkit (Chrome/Safari) revendique innerWidth est plus petite que clientWidth.

2. La revendication Trident et Presto innerWidth est supérieure à clientWidth. Les revendications Gecko innerWidth ont la même taille que clientWidth.

Quel est le comportement correct déclarépar W3C (ou silimar "autorité")?

Test Script (on JSFiddle) (sur 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>

(Exécutez l'extrait en mode pleine page et un maximisent ou "restaurer" la fenêtre d'observation debug_msg. tout en faisant glisser le bord de la fenêtre pour le redimensionner.)

Answer 1

Selon le W3C specification (17 Mars 2016):

Le innerWidth attribut doit retourner la largeur de la fenêtre, y compris la taille d'une barre de défilement rendu (le cas échéant), ou zéro s'il n'y a pas viewport.

...

L'attribut clientWidth doit exécuter ces étapes:

1. Si l'élément n'a pas de boîte CSS mise en page associée ou si la zone de mise en page CSS est en ligne, retour à zéro.
2. Si l'élément est l'élément racine et que le document de l'élément n'est pas en mode Quirks, ou si l'élément HTML est en mode Quirks, renvoie la largeur de la fenêtre sans la taille d'une barre de défilement (si seulement).
3. Renvoie la largeur du bord de remplissage à l'exclusion de la largeur de toute barre de défilement affichée entre le bord de remplissage et le bord de la bordure, en ignorant les transformations qui s'appliquent à l'élément et à ses ancêtres.

Answer 2

J'utilise ceci:

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

Il couvre des cas où la barre de défilement ne prend pas en considération et a un support mobile.