[javascript] 브라우저 뷰포트 크기를 얻는 방법?

JAVASCRIPT / 글쓴이

방문자에게 고품질의 이미지를 볼 수있는 기능을 제공하고 싶습니다. 창 크기를 감지 할 수있는 방법이 있습니까?

또는 JavaScript를 사용하는 브라우저의 뷰포트 크기? 녹색 영역을 여기에서보십시오 :

답변

크로스 브라우저 @media (width) 및 @media (height)값 

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

window.innerWidth 과 .innerHeight

  • 도착 CSS 뷰포트를 @media (width) 하고 @media (height)있는 스크롤바를 포함
  • initial-scale확대 / 축소 변동으로 인해 모바일 값이 PPK가 시각적 뷰포트 라고 부르는 값으로 잘못 축소 되어 값 보다 작을 수 있습니다.@media
  • 기본 반올림으로 인해 확대 / 축소로 인해 값이 1px 떨어져있을 수 있습니다
  • undefined IE8에서

document.documentElement.clientWidth 과 .clientHeight

자원

답변

jQuery 차원 함수

$(window).width() 과 $(window).height()

답변

window.innerWidth 및 window.innerHeight 속성을 사용할 수 있습니다 .

innerHeight 대 outerHeight

답변

jQuery를 사용하지 않으면 추악합니다. 다음은 모든 새 브라우저에서 작동하는 스 니펫입니다. IE의 Quirks 모드와 표준 모드에서는 동작이 다릅니다. 이것은 그것을 처리합니다.

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

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

답변

나는 이것이 받아 들일만한 대답을 알고 있지만 clientWidthiPhone (적어도 내 것이 아닌)은 320이 아닌 980을 반환했기 때문에 작동하지 않는 상황에 부딪쳤다.window.screen.width . 기존 사이트에서 작업하면서 “응답”상태를 유지하고 더 큰 브라우저에서 다른 메타 뷰포트를 사용하도록해야했습니다.

이것이 누군가에게 도움이되기를 바랍니다. 완벽하지는 않지만 iO 및 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);

답변

나는 크로스 브라우저 방식을 보았습니다.

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>

스 니펫 확장

답변

JavaScript : The Definitive Guide, 6th Edition by 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")모든 것이 좋아 보입니다.