Jak uzyskać wymiary viewportu przeglądarki?

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: Flip, 2009-08-08
Source

14 answers

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

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

window.innerWidth oraz window.innerHeight

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

document.documentElement.clientWidth oraz .clientHeight

Zasoby

 1440
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
2020-11-04 10:38:32

JQuery dimension functions

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

 112
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

 81
Author: Christian C. Salvadó,
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;
 34
Author: Chetan S,
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

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>
 17
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

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

 12
Author: nonopolarity,
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

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: https://tripleodeon.com/assets/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 jeszcze Srebrna kula (//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.

 12
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
2019-07-22 03:52:08

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

 11
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

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

 10
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

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.

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

Jeśli używasz Reacta, to z najnowszą wersją hooków Reacta możesz użyć tego.

// Usage
function App() {
   const size = useWindowSize();

   return (
     <div>
       {size.width}px / {size.height}px
     </div>
   );
 }

Https://usehooks.com/useWindowSize/

 1
Author: Vijay122,
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
2020-09-11 16:36:44

Możesz użyć window.addEventListener('resize' , yourfunction); uruchomi twoją funkcję, gdy okno zmieni rozmiar. gdy używasz window.innerWidth lub document.documentElement.clientWidth jest tylko do odczytu. możesz użyć instrukcji if w swojej funkcji i uczynić ją lepszą.

 0
Author: Amirhosein Saneie,
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
2020-10-28 19:35:09