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

788

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

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

javascript cross-browser viewport

— 알릭스 악셀
소스

10

내가하는 일은 일반적으로 html을 100 % 높이로 설정하고 높이를 얻는 것입니다. 어디서나 간단한 작업.

— Muhammad Umer

1

@MuhammadUmer 잘 잡아! jQuery가없는 휴대 전화에서 치수를 얻는 것이 좌절 getComputedStyle되면 확장 된 html태그 를 사용할 수 있습니다 .

— Dan

또한 브라우저 간 뷰포트 감지를 처리 하는 W 라이브러리를 사용할 수 있습니다 .;)

— pyrsmk

1327

크로스 브라우저 `@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모든 단위에서 정확한 치수를 얻기위한 실제 용도

— ryanve
소스

4

01100001 @ 교체 $와 함께 verge. jQuery에 통합하려면을 수행하십시오 jQuery.extend(verge). 참조 : verge.airve.com/#static

— ryanve

4

IE8 (및 아마도 다른 사람들) <!DOCTYPE html>에서 코드가 작동하려면 페이지 상단에 있어야한다고 언급하고 싶었습니다 .

— Tzury Bar Yochay

6

모바일 장치에서 clientWidth / Height에 만족하지 않습니다. 실제로 tripleodeon.com/wp-content/uploads/2011/12/table.html

— Dan

24

내가 뭔가를 놓치지 않으면이 대답은 잘못되었습니다. 크롬에서, 적어도, document.documentElement.clientHeight반품 페이지 높이를 하는 동안, window.innerHeight반환 뷰포트의 높이 . 큰 차이.

— Nate

2

서로 다른 화면 크기 변수 / 솔루션 라이브 테스트 : ryanve.com/lab/dimensions

— 알렉스 Pandrea

106

jQuery 차원 함수

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

— 스콧에 번든
소스

60

@allyourcode, 불가능, jQuery는 모두에 대한 답변 입니다.

— Xeoncross 2016 년

21

뷰포트 크기는 아니지만 전체 문서 크기를 얻습니다. 시도 해봐.

— Alejandro García Iglesias

2

고정 된 postitionning을 사용하여 addon 도구 모음을 HTML로 표시하는 브라우저의 경우, 특히 코드 상단 위치 및 백분율에 사용하려는 경우이 솔루션이 작동하지 않습니다.

— Adib Aroui

7

@AlejandroIglesias : 아니요, 방금이 SO 페이지에서 테스트했습니다. $(window).height();$("html").height();

— 10536을

2

경고 이러한 차원에는 스크롤 막대 (브라우저 및 플랫폼마다 크기가 다름)가 포함되어 있지 않으므로 CSS 미디어 쿼리와 일치하지 않지만 여기의 다른 답변은이 문제를 해결합니다.

— 스펜서 오라일리

75

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

innerHeight 대 outerHeight

— CMS
소스

29

다이어그램 : D의 경우 IE +1에서는 작동하지 않지만. 이와 같은 질문에 대해 더 많은 것을 갖지 않는 것은 범죄 여야합니다.

— allyourcode

8

@CMS document.documentElement.clientWidth는보다 정확하고 광범위하게 지원됩니다.window.innerWidth

— ryanve

6

@ryanve 만약 "더 정확한"이라는 말이 "원격으로 똑같은 일을하지 않았다"는 의미라면 yes : P

— 박스

Firefox 베타? 그것은 박물관에 속한 것입니다.

— Derek 朕會功夫

@boxed 모바일 Safari에서는 document.documentElement.clientWidthwindow.innerWidth가 문서 너비를 제공하는 동안 뷰포트 너비를 제공합니다. 그렇습니다.

— John

33

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

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

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

— 체탄 사스 트리
소스

8

이것이 뷰포트가 아닌 페이지 높이를 제공하지 않습니까?

— 이것이이

4

당신이 사용하는 clientHeight온 document.documentElement당신에게 뷰포트 크기를 줄 것이다 요소입니다. 문서 크기를 얻으려면해야합니다 document.body.clientHeight. Chetan이 설명했듯이이 동작은 최신 브라우저에 적용됩니다. 테스트하기 쉽습니다. 콘솔을 열고 document.documentElement.clientHeight여러 개의 열린 탭을 입력하십시오.

— Gajus

13

나는 이것이 받아 들일만한 대답을 알고 있지만 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);

— 재즈
소스

13

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

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>

스 니펫 확장

— 사용자 2921779
소스

그 결과 최대 코드 조각 놨을 둘러싼 iframe이 그 유래의 사용주의

— 밀러

11

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

— 비극성
소스

Retina 디스플레이 또는 Landscape vs Portrait 또는 메타 뷰포트 태그에 대해 이야기하고 있습니까? snowdragonledhk.com/… 에서와 같이 가상 픽셀을 의미하지는 않습니다 .

— nonopolarity

1) 높은 DPI 디스플레이에 대해 말할 때 여기에 설명 된 가상 픽셀을 의미합니다 : stackoverflow.com/a/14325619/139361 . 모든 iPhone 화면의 너비는 정확히 320 픽셀입니다. 2) 나는 말한다 : a) documentElement.clientWidthiOS의 기기 방향 변경에 응답하지 않습니다. b) 가상 픽셀 대신 실제 픽셀 수 (실제로는 쓸모가 없음)를 표시

— Dan

11

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

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

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

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

— 단
소스

10

이 코드는 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있습니다. 첫 번째는 가로 스크롤 막대의 높이를 포함합니다.

— 세페 빅토르
소스

1

OS, Retina 디스플레이 및 가로 / 세로 모드에서 답변을 테스트 했습니까? 이 링크는 다소 오래된 시스템을 다루지 만 코드가 작동하지 않음을 증명합니다. tripleodeon.com/wp-content/uploads/2011/12/table.html

— Dan

6

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

— 화염
소스

불행히도 현실은 "W3C 표준 솔루션"을 완전히 파괴합니다 : 1) caniuse.com/viewport-units , 2) caniuse.com/#feat=css-fixed . 개발자가 필요로하는 것은 "이론적으로 작동해야한다"는 것이 아니라 작동하는 솔루션입니다.

— Dan

표준에 의존 할 수 있다면 크로스 브라우저 솔루션이 모두 필요하지 않습니다. 사양에 응답하는 솔루션은 솔루션이 아닙니다.

— Derek 朕會功夫

3

이것이 내가하는 방법입니다 .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)
  );
}

— 마 놀린
소스

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

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

window.innerWidth 과 .innerHeight

document.documentElement.clientWidth 과 .clientHeight

자원

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

`window.innerWidth` 과 `.innerHeight`

`document.documentElement.clientWidth` 과 `.clientHeight`