Pobierz wymiary viewportu przeglądarki za pomocą JavaScript

Chcę zapewnić moim odwiedzającym możliwość oglądania obrazów w wysokiej jakości, Czy Jest jakiś sposób na wykrycie rozmiaru okna?

Albo jeszcze lepiej, rozmiar viewportu przeglądarki z JavaScript? Zobacz obszar zielony tutaj:

Author: 太極者無極而生, 2009-08-08
Source

12 answers

Cross-browser @media (width) oraz @media (height) wartości 

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

window.innerWidth i .innerHeight

  • gets CSS viewport @media (width) i @media (height) które zawierają scrollbars
  • initial-scale i zoom wariacje mogą spowodować, że wartości mobilne będą błędnie skalowane w dół do tego, co PPK nazywa Visual viewport i będą mniejsze od wartości @media
  • powiększenie może spowodować wyłączenie wartości 1px z powodu natywnego zaokrąglania
  • undefined w IE8 -

document.documentElement.clientWidth i .clientHeight

Zasoby

 1051
Author: ryanve,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-05 02:48:26

JQuery dimension functions

$(window).width() i $(window).height()

 98
Author: Scott Evernden,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-09 02:56:45

Możesz użyć okna .innerWidth i okno.innerheight właściwości.

innerHeight vs outerHeight

 61
Author: CMS,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-26 13:12:17

Jeśli nie używasz jQuery, robi się nieprzyjemnie. Oto fragment, który powinien działać na wszystkich nowych przeglądarkach. Zachowanie jest INNE w trybie Quirks i trybie Standard W IE. To się tym zajmie.

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

var height = elem.clientHeight;
var width = elem.clientWidth;
 30
Author: Chetan Sastry,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-08-08 06:29:58

Wiem, że ma akceptowalną odpowiedź, ale natrafiłem na sytuację, w której clientWidth nie działa, ponieważ iPhone (przynajmniej mój) zwrócił 980, a nie 320, więc użyłem window.screen.width. Pracowałem nad istniejącą witryną, która była "responsywna" i musiałem zmusić większe przeglądarki do używania innego meta-viewportu.

Mam nadzieję, że to komuś pomoże, może nie jest idealne, ale działa w moich testach na iOs i Androida. 

//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);
 10
Author: Jazzy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-15 10:36:31

Udało mi się znaleźć ostateczną odpowiedź w JavaScript: the Definitive Guide, 6th Edition by O ' Reilly, P. 391:

To rozwiązanie działa nawet w trybie dziwactwa, podczas gdy obecne rozwiązanie ryanve i ScottEvernden nie. 
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 };

}

Poza faktem, że zastanawiam się, dlaczego linia if (document.compatMode == "CSS1Compat") nie jest if (d.compatMode == "CSS1Compat"), wszystko wygląda dobrze.

 9
Author: 太極者無極而生,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-31 01:14:57

Istnieje różnica między window.innerHeight i document.documentElement.clientHeight. Pierwszy zawiera wysokość poziomego paska przewijania.

 7
Author: Szépe Viktor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-16 21:31:36

Szukałem i znalazłem sposób cross browser: 

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>
 7
Author: user2921779,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-03 22:15:10

Ten kod pochodzi z 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 : aby odczytać szerokość, użyj console.log('viewport width'+viewport().width);

 6
Author: Xavier Blondel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-31 08:01:04

Jeśli szukasz rozwiązania innego niż jQuery , które daje poprawne wartości w wirtualnych pikselach na urządzeniach mobilnych, i uważasz, że zwykłe window.innerHeight lub document.documentElement.clientHeight mogą rozwiązać twój problem, zapoznaj się najpierw z tym linkiem: http://tripleodeon.com/wp-content/uploads/2011/12/table.html

Programista wykonał dobre testy, które ujawniają problem: możesz uzyskać nieoczekiwane wartości dla Androida/iOS, wyświetlaczy poziomych/pionowych, normalnych / wysokiej gęstości.

Moja obecna odpowiedź nie jest srebrna bullet yet (//todo), ale raczej ostrzeżenie dla tych, którzy mają zamiar szybko skopiować-wkleić dowolne rozwiązanie z tego wątku do kodu produkcyjnego.

Szukałem szerokości strony w wirtualnych pikselach na komórce i znalazłem jedyny działający kod to (niespodziewanie!) window.outerWidth. Będę później zbadać tę tabelę dla prawidłowego rozwiązania podając wysokość z wyłączeniem paska nawigacyjnego, kiedy mam czas.

 5
Author: Dan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-13 17:34:24

Rozwiązaniem zgodnym ze standardami W3C byłoby utworzenie przezroczystego div( na przykład dynamicznie z JavaScript), ustawienie jego szerokości i wysokości na 100vw/100vh (jednostki Viewport), a następnie uzyskanie jego offsetWidth i offsetHeight. Następnie element można ponownie usunąć. Nie będzie to działać w starszych przeglądarkach, ponieważ jednostki viewport są stosunkowo nowe, ale jeśli nie zależy ci na nich, ale na (wkrótce) standardach, zdecydowanie możesz pójść w ten sposób: {]} 

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);

Z oczywiście, można również ustawić objNode.styl.position = "fixed", a następnie użyj 100% jako szerokość/wysokość - powinno to mieć taki sam efekt i poprawić kompatybilność w pewnym stopniu. Również ustawienie pozycji na stałą może być ogólnie dobrym pomysłem, ponieważ w przeciwnym razie div będzie niewidoczny, ale pochłonie trochę miejsca, co doprowadzi do pojawienia się pasków przewijania itp.

 4
Author: Firefall,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-05 21:16:18

Tak to robię, próbowałem w IE 8 - > 10, FF 35, Chrome 40, będzie działać bardzo sprawnie we wszystkich nowoczesnych przeglądarkach(jako okno.innerWidth jest zdefiniowane) oraz w IE 8 (bez okna.innerWidth) działa również płynnie, każdy problem (jak flashowanie z powodu przepełnienia: "hidden"), zgłoś to. Nie jestem naprawdę zainteresowany wysokością viewportu, ponieważ zrobiłem tę funkcję tylko po to, aby obejść niektóre responsywne narzędzia, ale może być zaimplementowana. Mam nadzieję, że to pomoże, doceniam komentarze i sugestie.

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)
  );
}
 2
Author: manolinjr81,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-24 11:57:56