jQuery를 사용하여 뷰포트 크기 가져오기
jQuery를 사용하여 브라우저 뷰포트의 크기를 결정하고 페이지 크기가 조정된 경우 이를 재검출하려면 어떻게 해야 합니까?이 공간에 IFRAME 사이즈를 만들어야 합니다(각 여백에 조금씩 들어갑니다).
모르는 사용자의 경우 브라우저 뷰포트는 문서/페이지 크기가 아닙니다.스크롤 전 창의 표시 크기입니다.
뷰포트의 너비 및 높이를 가져오는 방법
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
페이지 이벤트 크기 조정:
$(window).resize(function() {
});
뷰포트 유닛(CSS3)을 사용해 볼 수 있습니다.
div {
height: 95vh;
width: 95vw;
}
주요 질문에 대한 답변
대본$(window).height()잘 작동하지만(스크롤 높이가 있는 문서가 아닌 뷰포트의 높이 표시), 문서에 다음과 같은 doctype 태그를 올바르게 입력해야 합니다.
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는 "스크롤 오버플로를 숨긴 다음 뒤로 변경"하는 것을 피할 수 있을 것이라고 확신합니다. 죄송합니다. 특히 향후 프로그래머의 사용을 위해 코드에 문서화하지 않으면 더욱 그렇습니다.
추가 팁, 참고 사항:또한 스크립트를 수행하는 경우 프로그래머가 라이브러리를 사용하는 데 도움이 되는 테스트를 발명할 수 있습니다. 몇 가지를 발명해 보겠습니다.
달러(약)ready(함수: {})
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에 대해, "추가 팁, 참고 사항": 어제 논평(2014-09-04)에서 @Machiel은 전적으로 옳았습니다. 그가 지적했듯이, 우리는 $가 이미 정의되어 있다고 가정하기 때문에 $에 대한 수표가 Jquery의 준비 이벤트 내에 있을 수 없습니다.지적해 주셔서 감사드리며, 스크립트에서 사용했다면 나머지 독자분들도 수정해 주시기 바랍니다.제 제안은: 라이브러리를 초기화하는 "install_script()" 함수를 설치하는 것입니다. (ready() 선언을 포함하여 install_script() 함수 안에 $에 대한 참조를 넣고, "install_script()" 함수의 시작 부분에서 $가 정의되어 있는지 확인하되, 모든 것을 JQuery와 독립적으로 만듭니다.JQuery가 아직 정의되지 않은 경우 라이브러리가 "자체 진단"할 수 있습니다.저는 CDN에서 가져온 JQuery를 강제로 만드는 것보다 이 방법을 선호합니다.그것들은 다른 프로그래머들을 돕기 위한 작은 노트들입니다.저는 도서관을 만드는 사람들이 잠재적인 프로그래머의 실수에 대한 피드백이 더 풍부해야 한다고 생각합니다.예를 들어, 구글 아피스는 오류 메시지를 이해하기 위해 별도의 설명서가 필요합니다.매뉴얼이나 사양서를 검색할 필요가 없는 사소한 실수에 대해 외부 문서가 필요하다는 것은 터무니없는 일입니다.라이브러리는 자체 문서화되어야 합니다.저는 6개월 후에도 저지를 수 있는 실수를 처리하면서 코드를 작성하는데, 그것은 여전히 깨끗하고 반복되지 않는 코드, 이미 작성된 미래 개발자의 실수를 방지하기 위해 노력합니다.
$(창)을 사용할 수 있습니다.size(크기 조정): 뷰포트의 크기가 조정되었는지 여부를 탐지합니다.
jQuery에는 스크롤 막대가 있을 때 뷰포트[1]의 정확한 너비와 높이를 일관되게 감지하는 기능이 없습니다.
저는 Modernizr 라이브러리, 특히 javascript에 대한 미디어 쿼리를 여는 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();
제 대답은 아마도 양쪽에 여백이 있는 뷰포트 폭을 100%로 조정하는 데 도움이 되지 않을 것이지만, 자바스크립트 뷰포트 폭과 높이 계산의 불일치로 브라우저에 좌절한 웹 개발자들에게 위안을 제공할 수 있기를 바랍니다.
이것이 iframe과 관련하여 도움이 될 수 있습니다.
$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');
$(창)을 사용할 수 있습니다.너비(()) 및 $(window)입니다.highth(높이)는 일부 브라우저에서는 올바르지만 다른 브라우저에서는 올바르지 않은 숫자를 가져옵니다.이러한 브라우저에서는 window.innerWidth 및 window.innerHight를 사용하여 정확한 너비와 높이를 얻을 수 있지만, 이 방법은 사용자 에이전트 스니핑에 의존하기 때문에 이 방법을 사용하지 않는 것이 좋습니다.
일반적으로 브라우저마다 창 너비와 높이의 일부로 스크롤 막대를 포함하는지 여부에 대해 일관성이 없습니다.
참고: 둘 다 $(창)입니다.width() 및 window.innerWidth는 동일한 브라우저를 사용하는 운영 체제에 따라 다릅니다.참조: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238
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);
});
로드 및 크기 조정 시(Sima 기준) 뷰포트 크기 가져오기WB 응답):
function getViewport() {
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
$('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}
getViewport();
$(window).resize(function() {
getViewport()
});
CSS3 뷰포트 유닛(vh,vw)이 iOS에서 잘 재생되지 않음 페이지를 스크롤하면 뷰포트 크기가 어떻게든 다시 계산되고 뷰포트 유닛을 사용하는 요소의 크기도 증가합니다.그래서 실제로 자바스크립트가 필요합니다.
언급URL : https://stackoverflow.com/questions/3044573/using-jquery-to-get-size-of-viewport
'sourcecode' 카테고리의 다른 글
| Mongodb 정렬 내부 배열 (0) | 2023.06.08 |
|---|---|
| 오더ByChild가 Firebase에서 작동하지 않음 (0) | 2023.06.08 |
| iPhone/iPad 장치에서 사용 가능/사용 가능한 총 디스크 공간을 검색하는 방법은 무엇입니까? (0) | 2023.06.03 |
| Postgre를 시작하는 방법Mac OS X의 SQL 서버? (0) | 2023.06.03 |
| 앱이 순수한 스위프트 프로젝트에서 유닛 테스트를 실행하는지 어떻게 알 수 있습니까? (0) | 2023.06.03 |