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

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

Или еще лучше, размер видового экрана браузера с JavaScript? Здесь можно увидеть зеленую зону:

ОТВЕТЫ

Ответ 1

Кросс-браузер @media (width) и @media (height) значения  

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.innerWidth и .innerHeight

  • получает окно просмотра CSS @media (width) и @media (height), которые включают полосы прокрутки
  • initial-scale и масштабировать варианты могут привести к тому, что значения мобильных значений ошибочно уменьшатся до того, что PPK вызывает визуальный просмотр и быть меньше значений @media
  • масштабирование может привести к отключению 1px из-за собственного округления
  • undefined в IE8 -

document.documentElement.clientWidth и .clientHeight

Ресурсы

Ответ 4

Если вы не используете jQuery, он становится уродливым. Вот фрагмент, который должен работать на всех новых браузерах. Поведение в режиме Quirks и стандартном режиме в IE отличается. Это позаботится об этом.

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;

Ответ 5

Я знаю, что это приемлемый ответ, но я столкнулся с ситуацией, когда clientWidth не работал, поскольку iPhone (по крайней мере мой) вернул 980, а не 320, поэтому я использовал window.screen.width. Я работал над существующим сайтом, будучи "отзывчивым" и должен был заставить большие браузеры использовать другой мета-просмотр.

Надеюсь, что это поможет кому-то, это может быть не идеально, но он работает в моем тестировании на iOS и Android.

//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width 
  //first see if they have window.screen.width avail
  (function() {
    if (window.screen.width)
    {
      var setViewport = {
        //smaller devices
        phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
        //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints  
        other: 'width=1045,user-scalable=yes',
        //current browser width
        widthDevice: window.screen.width,
        //your css breakpoint for mobile, etc. non-mobile first
        widthMin: 560,
        //add the tag based on above vars and environment 
        setMeta: function () {
          var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other; 
          var head = document.getElementsByTagName("head")[0];
          var viewport = document.createElement('meta');
          viewport.setAttribute('name','viewport');
          viewport.setAttribute('content',params);
          head.appendChild(viewport);
        }
      }
      //call it 
      setViewport.setMeta();
    }
  }).call(this);

Ответ 6

Я смог найти окончательный ответ в JavaScript: The Definitive Guide, 6th Edition от O'Reilly, p. 391:

Это решение работает даже в режиме Quirks, тогда как текущее решение ryanve и ScottEvernden не работает.

function getViewportSize(w) {

    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return { w: d.documentElement.clientWidth,
           h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientHeight };

}

за исключением того, что мне интересно, почему строка if (document.compatMode == "CSS1Compat") не if (d.compatMode == "CSS1Compat"), все выглядит хорошо.

Ответ 7

Я посмотрел и нашел кросс-браузер:

function myFunction(){
  if(window.innerWidth !== undefined && window.innerHeight !== undefined) { 
    var w = window.innerWidth;
    var h = window.innerHeight;
  } else {  
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
  }
  var txt = "Page size: width=" + w + ", height=" + h;
  document.getElementById("demo").innerHTML = txt;
}
<!DOCTYPE html>
<html>
  <body onresize="myFunction()" onload="myFunction()">
   <p>
    Try to resize the page.
   </p>
   <p id="demo">
    &nbsp;
   </p>
  </body>
</html>

Ответ 8

Этот код от http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

NB: чтобы прочитать ширину, используйте console.log('viewport width'+viewport().width);

Ответ 9

Существует разница между window.innerHeight и document.documentElement.clientHeight. Первая включает в себя высоту горизонтальной полосы прокрутки.

Ответ 10

Если вы ищете решение , window.innerHeight jQuery, которое дает правильные значения в виртуальных пикселях на мобильном телефоне, и вы думаете, что обычный window.innerHeight или document.documentElement.clientHeight может решить вашу проблему, сначала изучите эту ссылку: https://tripleodeon. ком/активы/2011/12/table.html

Разработчик провел хорошее тестирование, которое выявляет проблему: вы можете получить неожиданные значения для Android/iOS, альбомной/портретной ориентации, дисплеев с нормальной/высокой плотностью.

Мой текущий ответ пока не является "серебряной пулей" (//todo), а скорее предупреждением для тех, кто собирается быстро скопировать и вставить любое решение из этого потока в производственный код.

Я искал ширину страницы в виртуальных пикселях на мобильном телефоне и обнаружил, что единственный работающий код - это (неожиданно!) window.outerWidth. Позже я проверю эту таблицу на предмет правильного решения с указанием высоты, исключая панель навигации, когда у меня будет время.

Ответ 11

Решение, которое будет соответствовать стандартам 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% как ширину/высоту - это должно иметь такой же эффект и в некоторой степени улучшить совместимость. Кроме того, установка фиксированного положения может быть хорошей идеей в целом, поскольку в противном случае div будет невидимым, но потребляет некоторое пространство, что приведет к появлению полос прокрутки и т.д.

Ответ 12

Так я это делаю, я пробовал его в 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)
  );
}