Window.innerWidth vs document.documentElement.clientWidth

Относительно window.innerWidth и document.documentElement.clientWidth,

  • Заявки на Webkit (Chrome/Safari) innerWidth меньше, чем clientWidth.

  • Требование Trident и Presto innerWidth больше, чем clientWidth.

  • Gecko утверждает, что innerWidth имеет тот же размер, что и clientWidth.

Какое правильное поведение указано W3C (или силимаром "авторитет" )?

Тестирование Script (в JSFiddle) (на 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>

Ответы

Ответ 1

В соответствии со спецификацией W3C (17 марта 2016 года):

Атрибут innerWidth должен возвращать ширину видового экрана, включая размер выделенной полосы прокрутки (если таковой имеется) или ноль, если есть нет окна просмотра.

...

Атрибут clientWidth должен выполнять следующие действия:

  • Если элемент не имеет связанного с ним макета CSS-макета или если поле макета CSS является встроенным, верните нуль.
  • Если элемент является корневым элементом, а документ элемента не находится в режиме quirks, или если элемент является элементом тела HTML, а документ элемента находится в режиме quirks, верните ширину видового экрана, исключая размер созданной полосы прокрутки (если есть).
  • Возвращает ширину края заполнения, исключая ширину любой отображаемой полосы прокрутки между краем заполнения и краем границы, игнорируя любые преобразования, которые применяются к элементу и его предкам.

Ответ 2

Я использую это:

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

Он охватывает случаи, когда полоса прокрутки не принимает во внимание и имеет мобильную поддержку.