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

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

또는 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

• CSS 뷰포트 너비 에서 스크롤바 너비를 뺀 값
• 일치 @media (width)와 @media (height)이없는 경우 에는 스크롤
• 브라우저 뷰포트를 호출jQuery(window).width() 하는 jQuery 와 동일
• 사용 가능한 크로스 브라우저
• doctype이 누락 된 경우 부정확

자원

• 다양한 차원의 라이브 출력
• verge 는 크로스 브라우저 뷰포트 기술을 사용합니다.
• matchMedia모든 단위에서 정확한 치수를 얻기위한 실제 용도

jQuery 차원 함수

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

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

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")모든 것이 좋아 보입니다.

모바일에서 가상 픽셀로 올바른 값을 제공하는 비 jQuery 솔루션 을 찾고 있고 그 평범 window.innerHeight하거나 document.documentElement.clientHeight문제를 해결할 수 있다고 생각되면 먼저이 링크를 연구하십시오 : https://tripleodeon.com/assets/2011/12/ table.html

개발자는 문제를 밝혀내는 훌륭한 테스트를 수행했습니다. Android / iOS, 가로 / 세로, 보통 / 고밀도 디스플레이에 대해 예기치 않은 값을 얻을 수 있습니다.

내 현재 답변은 아직 은색 총알 (// todo)이 아니라 주어진 솔루션을이 스레드에서 프로덕션 코드로 빠르게 복사하여 붙여 넣을 사람들에게 경고합니다.

모바일 에서 가상 픽셀의 페이지 너비를 찾고 있었고 작동하는 유일한 코드는 (예상치 않습니다!) window.outerWidth입니다. 나중에 시간이있을 때 탐색 막대를 제외하고 높이를 제공하는 올바른 솔루션에 대해이 표를 검사합니다.

이 코드는 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);

window.innerHeight와 사이에는 차이가 document.documentElement.clientHeight있습니다. 첫 번째는 가로 스크롤 막대의 높이를 포함합니다.

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가 보이지 않지만 약간의 공간이 소비되어 스크롤 막대가 표시됩니다.

이것이 내가하는 방법입니다 .IE 8-> 10, FF 35, Chrome 40에서 시도했습니다. 모든 최신 브라우저 (window.innerWidth가 정의 됨)와 IE 8 (창 없음)에서 매우 원활하게 작동합니다. 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)
  );
}