Блог

Я пытаюсь получить правильную ширину и высоту окна браузера в Chrome. Размер правильный в Firefox, я не пробовал никаких других браузеров.

Я установил для doctype значение !DOCTYPE html и попробовал $( window ).height() , $( window ).width() , window.innerHeight и window.innerWidth , но все они дают неправильные значения.

Я использую openSUSE tumbleweed, а версия chrome — «Версия 86.0.4240.75 (официальная сборка) (64-разрядная версия)»

Обновлен Chrome до «Версии 87.0.4280.88 (официальная сборка) (64-разрядная версия)» это тоже не помогло, по-прежнему неправильный размер.

Я включил пару изображений, которые показывают это, ОБРАТИТЕ ВНИМАНИЕ: значения DOMRect неверны в Chrome, но верны в firefox. Извините, вам может потребоваться увеличить масштаб, чтобы увидеть значения. Ниже приведено то, что я регистрирую в двух изображениях.

 console.log(
    $('#primary')[0].getBoundingClientRect(),
    $( window ).width(),
    window.innerWidth,
    $( window ).height(),
    window.innerHeight
)
 

Мне нужны точные размеры, чтобы все было правильно выстроено. Вы можете видеть на изображении firefox ниже цвет фона «красный» чуть выше горизонтальной полосы прокрутки. Мне нужно знать правильные размеры окна
, чтобы я мог посчитать и выстроить все в ряд.

Есть ли другой более точный способ сделать это?

Изображение ниже — это то, что я получил из JSFiddle, предложенного в комментарии ниже формы «FSDford». Вы можете увидеть в консоли размер 877 красным цветом «нужно увеличить, чтобы увидеть это». Линейка говорит, что ее ширина равна 856! И снова Firefox имеет правильную ширину.

Я поддерживаю библиотеку под названием iframe-resizer, которая изменяет размеры фреймов в соответствии с их содержимым, поэтому я потратил несколько лет на поиски наилучшего решения этой проблемы.

Простой ответ заключается в том, что если ваш CSS приводит к переполнению body элемента контентом, он становится сложным и ненадежным.

Моя библиотека предлагает несколько различных методов для решения этой проблемы, и они предлагают разные компромиссы.

Для начала браузер предлагает четыре разных значения высоты и ширины, и они часто дают разные ответы

 document.body.offsetHeight
document.body.scrollHeight
document.documentElement.offsetHeight
document.documentElement.scrollHeight
 

Вы можете найти одну из этих работ для вас, или вы можете прочитать все четыре и использовать наибольшее значение.

Если это не сработает, мы можем получить лучшее значение методом перебора, получив нижнюю позицию каждого элемента на странице и вычисляя наименьшее значение.

  function getAbsoluteHeight() {
   var allElements = document.querySelectorAll('body *')
   var maxBottomVal = 0

   Array.prototype.forEach.call(allElements, function(el) {
     var styles = window.getComputedStyle(el)
     var marginBottom = 0

     if (styles.marginBottom amp;amp; !isNaN(parseInt(styles.marginBottom), 10)) {
        marginBottom = parseInt(styles.marginBottom, 10)
     }

     var posBottom = el.getBoundingClientRect().bottom
     var elBottom = marginBottom   posBottom

     if (elBottom > maxBottomVal) {
        maxBottomVal = elBottom
     }
   })

   return Math.ceil(maxBottomVal)
}
 

Очевидно, что это связано с некоторыми накладными расходами, если вам приходится перепроверять его каждый раз, когда изменяется содержимое страницы или изменяется размер окна. Если вы знаете, какие элементы, вероятно, находятся внизу страницы, вы можете пометить их data-height атрибутом, а затем проверить положение этого элемента с добавлением к нему.

Хотя я говорил здесь только о высоте, все также будет работать с шириной.

я не думаю, что вам нужен jQuery, чтобы получить ширину окна браузера, просто попробуйте использовать window.innerWidth using native javascript.

Это должно работать для Firefox, Chrome и любого другого браузера.

 var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;