window.innerWidth vs document.documentElement.clientWidth - PullRequest
Новая
       33

window.innerWidth vs document.documentElement.clientWidth

32 голосов
/ 04 августа 2011

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

  1. Webkit (Chrome / Safari) утверждает, что innerWidth меньше clientWidth.

  2. Требование Trident и Presto innerWidth больше clientWidth.

  3. Геккон утверждает, что innerWidth соответствует размеру clientWidth.

Что такое правильное поведение , заявленное W3C (или silimar "авторитетом")?

Тестовый скрипт ( на 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>

(Запустите фрагмент в режиме полной страницы и отмените максимизацию или «восстановите» окно. Наблюдайте debug_msg, перетаскивая край окна, чтобы изменить его размер.)

Ответы [ 2 ]

29 голосов
/ 26 августа 2011

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

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

...

Атрибут clientWidth необходимо выполнить следующие шаги:

  1. Если элемент не имеет связанного блока макета CSS или если блок макета CSS встроен, вернуть ноль.
  2. Если элемент является корневым элементом идокумент элемента не находится в режиме причуд, или, если элемент является элементом тела HTML, а документ элемента находится в режиме причуд, возвращает ширину области просмотра, исключая размер отображаемой полосы прокрутки (если есть).
  3. Returnширина края заполнения, исключая ширину любой визуализированной полосы прокрутки между краем заполнения и краем границы, игнорируя любые преобразования, которые применяются к элементу и его предкам.
16 голосов
/ 04 октября 2014

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

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

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

...