jQuery를 사용하여 뷰포트 크기 가져 오기

308

jQuery를 사용하여 브라우저 뷰포트의 크기를 결정하고 페이지 크기가 조정되면이를 다시 감지하려면 어떻게해야합니까? 이 공간에 IFRAME 크기를 만들어야합니다 (각 여백에 조금씩옵니다).

모르는 사람들을 위해 브라우저 뷰포트는 문서 / 페이지의 크기가 아닙니다. 스크롤하기 전에 창의 보이는 크기입니다.

jquery  resize  size  viewport 
— 볼로 마이크
소스
스크롤 할 수있는 것뿐만 아니라 장치 화면에 표시되는 영역을 얻는 방법에 대한 아이디어가 있습니까? 확대 된 부분이 아니라 $ (window) .height ()가 문서의 전체 너비를 반환하는 것을 봅니다. 확대 / 축소를 적용한 후 표시되는 양을 알고 싶습니다.
— Frank Schwieterman
appelsiini.net/projects/viewport 이 작업을 수행해야합니다! :)
— Mackelito
1
이것은 질문에 대한 직접적인 대답은 아니지만 뷰포트와 관련된 위치 및 가시성에 따라 선택기를 조작하려는 사람들에게 유용 할 수 있습니다. appelsiini.net/projects/viewport (plugin)
— Wallace Sidhrée

답변:

484

뷰포트의 너비와 높이를 얻으려면 :

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

페이지 크기 조정 이벤트 :

$(window).resize(function() {

});
— SimaWB
소스
18
Windows IE6, IE8, FF3.6.3, Chrome 5.0.375.70, Opera 10.53 및 Safari 5.0 (7533.16)에서 이것을 테스트했습니다. 이것은 이들 모두에서 일관되게 작동합니다. 또한 우분투에서 FF3.6.3을 테스트했으며 거기에서도 작동합니다. WordPress 2.9.2와 함께 jQuery 1.3을 사용하고 있다고 생각합니다.
— Volomike
48
스크롤 할 수있는 것뿐만 아니라 장치 화면에 표시되는 영역을 얻는 방법에 대한 아이디어가 있습니까? 확대 된 부분이 아니라 $ (window) .height ()가 문서의 전체 너비를 반환하는 것을 봅니다. 확대 / 축소를 적용한 후 표시되는 양을 알고 싶습니다.
— Frank Schwieterman
9
실제로 innerWidth/ innerHeight는 사용하기에 더 정확합니다 (확대 / 축소).
18
@FrankSchwieterman 브라우저가 원하는 방식으로 작동하지 않을 수 있습니다. 아마도이 문제가 발생했을 수 있습니다 : stackoverflow.com/q/12103208/923560 . HTML 파일에 적절한 DOCTYPE선언이 포함되어 있는지 확인하십시오 ( 예 :) <!DOCTYPE html>.
— Abdull
21
이것은 완전히 잘못되었습니다. 뷰포트가 아닌 문서 크기 (문서의 창 크기)를 제공합니다.
— Mike Bethany 5
26

1. 주요 질문에 대한 답변

스크립트 $(window).height()는 잘 작동합니다 (스크롤 높이가있는 문서가 아닌 뷰포트의 높이 표시). 그러나 문서에 doctype 태그를 올바르게 입력해야합니다 (예 : 다음 doctypes).

HTML 5의 경우 :

<!DOCTYPE html>

전환 HTML4의 경우 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

아마도 일부 브라우저에서 가정 한 기본 doctype $(window).height()은 브라우저의 높이가 아니라 문서의 높이 를 취합니다. doctype 사양을 사용하면 만족스럽게 해결되었으며, pep가 "스크롤 오버 플로우를 숨겨진 다음 다시 변경"하는 것을 피할 것이라고 확신합니다. 미안하지만 조금 더러운 트릭입니다. 나중에 프로그래머가 사용할 수 있도록 코드에 문서화하십시오.

2. 추가 팁, 참고 사항 : 또한 스크립트를 작성하는 경우 프로그래머가 라이브러리를 사용하는 데 도움이되는 테스트를 만들 수 있습니다.

$ (document) .ready (function () {

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI Jquery library");
      }
      if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
      }

});

편집 : 2 부, "추가 팁, 따로 참고": @Machiel, 어제 의견 (2014-09-04)에서 옳았습니다 : $의 확인은 Jquery의 준비 이벤트 내부에있을 수 없습니다. 우리는 그가 지적했듯이 $가 이미 정의되어 있다고 가정합니다. 지적 해 주셔서 감사합니다. 스크립트에서 사용한 경우 나머지 독자들도이 문제를 해결하십시오. 내 제안은 : 귀하의 라이브러리에 라이브러리를 초기화하는 "install_script ()"함수를 넣습니다 (ready () 선언을 포함하여 init 함수 안에 $에 대한 모든 참조를 넣음). "install_script ()"함수의 시작 $가 정의되어 있는지 확인하지만 JQuery와 독립적으로 모든 것을 만들면 JQuery가 아직 정의되지 않은 경우 라이브러리가 "자체 진단"할 수 있습니다. CDN에서 가져 오는 JQuery를 자동으로 작성하지 않고이 방법을 선호합니다. 이것들은 다른 프로그래머들을 돕는 작은 메모입니다. 도서관을 만드는 사람들은 프로그래머의 실수에 대한 피드백이 풍부해야한다고 생각합니다. 예를 들어 오류 메시지를 이해하려면 Google Apis에 별도의 설명서가 필요합니다. 매뉴얼이나 사양을 검색 할 필요가없는 작은 실수에 대한 외부 문서가 필요하다는 것은 터무니없는 일입니다. 라이브러리는 자체 문서화되어야합니다. 지금부터 6 개월이 지났을지도 모르는 실수를 처리하는 코드조차도 작성하고 있으며, 코드는 이미 깨끗하고 반복되지 않는 코드로 이미 시도하여 미래를 대비 한 미래의 개발자 실수입니다. 도서관을 만드는 사람들은 프로그래머의 실수에 대한 피드백이 더 풍부해야한다고 생각합니다. 예를 들어 오류 메시지를 이해하려면 Google Apis에 별도의 설명서가 필요합니다. 매뉴얼이나 사양을 검색 할 필요가없는 작은 실수에 대한 외부 문서가 필요하다는 것은 터무니없는 일입니다. 라이브러리는 자체 문서화되어야합니다. 지금부터 6 개월이 지났을지도 모르는 실수를 처리하는 코드조차 작성하고 있으며, 코드는 이미 깨끗하고 반복되지 않는 코드로 이미 시도하여 미래를 대비 한 미래의 개발자 실수입니다. 도서관을 만드는 사람들은 프로그래머의 실수에 대한 피드백이 더 풍부해야한다고 생각합니다. 예를 들어 오류 메시지를 이해하려면 Google Apis에 별도의 설명서가 필요합니다. 매뉴얼이나 사양을 검색 할 필요가없는 작은 실수에 대한 외부 문서가 필요하다는 것은 터무니없는 일입니다. 라이브러리는 자체 문서화되어야합니다. 지금부터 6 개월이 지났을지도 모르는 실수를 처리하는 코드조차 작성하고 있으며, 코드는 이미 깨끗하고 반복되지 않는 코드로 이미 시도하여 미래를 대비 한 미래의 개발자 실수입니다. 설명서 나 사양을 찾아서 검색하지 않아도됩니다. 라이브러리는 자체 문서화되어야합니다. 지금부터 6 개월이 지났을지도 모르는 실수를 처리하는 코드조차 작성하고 있으며, 코드는 이미 깨끗하고 반복되지 않는 코드로 이미 시도하여 미래를 대비 한 미래의 개발자 실수입니다. 설명서 나 사양을 찾아서 검색하지 않아도됩니다. 라이브러리는 자체 문서화되어야합니다. 지금부터 6 개월이 지났을지도 모르는 실수를 처리하는 코드조차 작성하고 있으며, 코드는 이미 깨끗하고 반복되지 않는 코드로 이미 시도하여 미래를 대비 한 미래의 개발자 실수입니다.

— 데이비드 L
소스
2
게시물을 읽는 것은 매우 어렵습니다. 다른 사람처럼 StackExchange Markdown에 익숙해 지도록 게시물을 다시 작성하십시오 . 있다 StackExchange 사이트를 TinyMCE에를 사용하지 않는 이유는 ,하지만 당신이 가진 불만이있는 경우에 참여 메타 .
— Volomike
$이미 $call을 사용한 후 가용성을 확인하는 것이 약간 이상합니다 $(document).ready(function() { } );. jQuery를 사용할 수 있는지 확인하는 것이 좋지만이 시점에서 이미 너무 늦었습니다.
— Machiel
@Machiel, 당신은 정말 맞습니다. 다행스럽게도 방금 스크립트를 확인하려고했는데 준비된 이벤트를 사용하지 않습니다. 네, 고맙습니다, 당신이 이것을 말했을 때 어리석은 느낌이 들었지만 다행히도 스크립트에서 검사가 "install_this_script ()"라는 함수 안에 있는지 확인했습니다. 그런 설치에서는 라이브러리의 init 함수를 호출합니다. 그 전에 $ 객체가 정의되어 있는지 여부를 (OUTSIDE JQUERY) 확인합니다. 어쨌든 고마워, 형제, 당신은 정말 나를 놀라게했다! 이 게시물이 너무 길어서 두렵습니다.이 실수가 다른 독자들에게 큰 해를 끼치 지 않기를 바랍니다. 게시물을 수정했습니다.
— David L
이것이 진정한 대답이어야합니다! 감사!
— Justin T. Watts
6

$ (window) .resize ()를 사용하여 뷰포트의 크기를 조정할 수 있습니다.

jQuery에는 스크롤 막대가있을 때 뷰포트의 올바른 너비와 높이를 일관되게 감지하는 기능이 없습니다 [1].

Modernizr 라이브러리를 사용하는 솔루션과 특히 자바 스크립트에 대한 미디어 쿼리를 여는 mq 함수를 찾았습니다.

내 해결책은 다음과 같습니다.

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

내 대답은 아마도 양쪽에 여백이있는 iframe을 100 % 뷰포트 너비로 조정하는 데 도움이되지 않지만 자바 스크립트 뷰포트 너비 및 높이 계산의 브라우저 불일치에 좌절하는 웹 개발자에게 위안을 줄 수 있기를 바랍니다.

어쩌면 이것은 iframe과 관련하여 도움이 될 수 있습니다.

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] $ (window) .width () 및 $ (window) .height ()를 사용하여 일부 브라우저에서는 정확하지만 다른 브라우저에서는 올바르지 않은 숫자를 얻을 수 있습니다. 해당 브라우저에서 window.innerWidth 및 window.innerHeight를 사용하여 올바른 너비와 높이를 얻을 수 있지만이 방법은 사용자 에이전트 스니핑에 의존하기 때문에이 방법에 대해 조언 할 것입니다.

일반적으로 다른 브라우저는 창 너비와 높이의 일부로 스크롤 막대를 포함하는지 여부에 대해 일관성이 없습니다.

참고 : $ (window) .width () 및 window.innerWidth는 동일한 브라우저를 사용하는 운영 체제마다 다릅니다. 참조 : https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

— Forsvunnet
소스
4 
function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });
— 아누 라즈
소스
$ (window) .height ()를 사용하면 전체 창 크기를 제공하는 뷰포트 크기를 제공하지 않지만 일반적으로 문서가 더 클 수는 있지만 전체 문서의 크기입니다.
— AnuRaj 2016 년
폭에 좋습니다!
— Marc
2

로드 및 크기 조정 시 뷰포트의 크기를 얻으려면 (SimaWB 응답 기반) :

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});
— 산드로 마르케스
소스
1

CSS3 뷰포트 단위 (vh, vw)는 iOS에서 잘 재생되지 않습니다. 페이지를 스크롤하면 뷰포트 크기가 다시 계산되고 뷰포트 단위를 사용하는 요소의 크기도 증가합니다. 따라서 실제로 일부 자바 스크립트가 필요합니다.

— DAH
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.