답변:
원래 답변은 2009 년에 작성되었습니다. 여전히 작동하는 동안 2017 년에 업데이트하고 싶습니다. 브라우저는 여전히 다르게 동작 할 수 있습니다. jQuery 팀이 브라우저 간 일관성을 유지하는 데 큰 역할을한다고 확신합니다. 그러나 전체 라이브러리를 포함 할 필요는 없습니다. jQuery 소스에서 관련 부분은 dimension.js의 37 행에 있습니다. 여기에서 독립형으로 작동하도록 추출되고 수정됩니다.
function getWidth() {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
function getHeight() {
return Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight
);
}
console.log('Width: ' + getWidth() );
console.log('Height: ' + getHeight() );모든 브라우저는 다르게 동작하므로 먼저 값을 테스트 한 다음 올바른 값을 사용해야합니다. 이를위한 기능은 다음과 같습니다.
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientWidth) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}높이와 마찬가지로 :
function getHeight() {
if (self.innerHeight) {
return self.innerHeight;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
if (document.body) {
return document.body.clientHeight;
}
}사용하여 스크립트에서이 두 가지를 전화 getWidth()또는 getHeight(). 브라우저의 기본 속성이 정의되어 있지 않으면를 반환 undefined합니다.
self.innerWidth 423경우 document.documentElement.clientWidth 326및을 참조하십시오 document.body.clientWidth 406. 이 경우 질문 : 어느 것이 정확하고 어느 것을 사용해야합니까? 예를 들어 Google지도의 크기를 조정하고 싶습니다. 326 또는 423의 큰 차이. 너비가 ~ 700이면 759, 735, 742 (큰 차이는 아님)를 참조하십시오.
var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);및 var windowWidth = self.innerWidth || -1;// "body"또는 "screen"또는 "document"때문에 html의 넘친 내용을 확인하면 이해할 수있는 "window"가 아닙니다. # i.stack.imgur.com/6xPdH.png
getWidth()참조self.innerHeight
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;둘 다 정수를 반환하고 jQuery가 필요하지 않습니다. 크로스 브라우저 호환
jQuery가 width () 및 height ()에 대해 잘못된 값을 반환하는 경우가 종종 있습니다.
왜 matchMedia를 언급하지 않습니까?
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}그렇게 많이 테스트하지는 않았지만 안드로이드 기본 브라우저와 안드로이드 크롬 브라우저, 데스크탑 크롬으로 테스트했지만 지금까지는 잘 작동하는 것처럼 보입니다.
물론 그것은 숫자 값을 반환하지 않지만 부울을 반환합니다-일치하거나 그렇지 않으면 질문에 정확히 맞지 않을 수도 있지만 그것은 우리가 어쨌든 원하는 것이며 아마도 저자가 원하는 것입니다.
W3schools와 크로스 브라우저에서 IE의 암흑 시대로 거슬러 올라갑니다!
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
alert("Browser inner window width: " + w + ", height: " + h + ".");
</script>
</body>
</html>위에 제시된 기능의 짧은 버전은 다음과 같습니다.
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
else if (document.documentElement && document.documentElement.clientHeight){
return document.documentElement.clientWidth;
}
else if (document.body) {
return document.body.clientWidth;
}
return 0;
}Travis의 답변에 대한 현대 JS에 적합한 솔루션 :
const getPageWidth = () => {
const bodyMax = document.body
? Math.max(document.body.scrollWidth, document.body.offsetWidth)
: 0;
const docElementMax = document.documentElement
? Math.max(
document.documentElement.scrollWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
)
: 0;
return Math.max(bodyMax, docElementMax);
};트래비스의 답변에 중요한 추가 사항; 스크롤바 너비를 계산하려면 getWidth ()를 문서 본문에 넣어야하며, 그렇지 않으면 브라우저의 스크롤바 너비를 getWidth ()에서 빼야합니다. 제가 한 ;
<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>나중에 어디서나 aWidth 변수를 호출하십시오.