Получите размеры окна просмотра браузера с помощью JavaScript - PullRequest
Новая
       38

Получите размеры окна просмотра браузера с помощью JavaScript

689 голосов
/ 08 августа 2009

Я хочу предоставить своим посетителям возможность видеть изображения в высоком качестве, есть ли способ определить размер окна?

Или, что еще лучше, размер окна просмотра браузера с JavaScript? Смотрите зеленую зону здесь:

Ответы [ 12 ]

6 голосов
/ 06 мая 2013

Решение, которое соответствовало бы стандартам W3C, было бы создать прозрачный div (например, динамически с JavaScript), установить его ширину и высоту 100vw / 100vh (единицы просмотра) и затем получить его offsetWidth и offsetHeight. После этого элемент можно удалить снова. Это не будет работать в старых браузерах, потому что модули окна просмотра являются относительно новыми, но если вы не заботитесь о них, а о (скоро) стандартах, вы можете определенно пойти по этому пути: 

var objNode = document.createElement("div");
objNode.style.width  = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth  = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);

Конечно, вы также можете установить objNode.style.position = "fixed" и затем использовать 100% в качестве ширины / высоты - это должно иметь такой же эффект и в некоторой степени улучшить совместимость. Кроме того, установка позиции в положение fixed может быть хорошей идеей в целом, потому что в противном случае div будет невидимым, но займет некоторое пространство, что приведет к появлению полос прокрутки и т. Д.

3 голосов
/ 24 февраля 2015

Это то, как я это делаю, я попробовал это в IE 8 -> 10, FF 35, Chrome 40, он будет работать очень гладко во всех современных браузерах (как определено window.innerWidth) и в IE 8 (с no window.innerWidth), он также работает плавно, любая проблема (например, мигание из-за переполнения: «скрыто»), пожалуйста, сообщите об этом. Меня не очень интересует высота области просмотра, так как я сделал эту функцию только для обхода некоторых адаптивных инструментов, но она может быть реализована. Надеюсь, это поможет, я ценю комментарии и предложения. 

function viewportWidth () {
  if (window.innerWidth) return window.innerWidth;
  var
  doc = document,
  html = doc && doc.documentElement,
  body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
  getWidth = function (elm) {
    if (!elm) return 0;
    var setOverflow = function (style, value) {
      var oldValue = style.overflow;
      style.overflow = value;
      return oldValue || "";
    }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
    setOverflow(style, oldValue);
    return width;
  };
  return Math.max(
    getWidth(html),
    getWidth(body)
  );
}
Страница:
...