如何获取在所有主流浏览器中都可以使用的windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , pageY , screenX和screenY ?
#1楼
这包含您需要了解的所有信息: 获取视口/窗口大小
简而言之:
var win = window,
doc = document,
docElem = doc.documentElement,
body = doc.getElementsByTagName('body')[0],
x = win.innerWidth || docElem.clientWidth || body.clientWidth,
y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);
请停止编辑此答案。 现在已经由不同的人对其进行了20次编辑,以匹配他们的代码格式首选项。 还指出了,如果您只想定位现代浏览器,则不需要这样做-如果是这样,则只需要以下内容:
const width = window.innerWidth || document.documentElement.clientWidth ||
document.body.clientWidth,
const height = window.innerHeight|| document.documentElement.clientHeight||
document.body.clientHeight;
console.log(width, height);
#2楼
一种获取可用屏幕尺寸的非jQuery方法。 window.screen.width/height已经设置好了,但是出于响应性网页设计和完整性的考虑,我认为值得一提的是这些属性:
alert(window.screen.availWidth);
alert(window.screen.availHeight);
availWidth和availHeight-屏幕上的可用宽度和高度(不包括OS任务栏等)。
#3楼
您还可以获取WINDOW的宽度和高度,避免使用浏览器工具栏和其他东西。 这是浏览器窗口中实际可用的区域 。
为此,请使用: window.innerWidth和window.innerHeight属性( 请参阅w3schools的文档 )。
例如,在大多数情况下,这是显示完美居中浮动模式对话框的最佳方法。 无论使用哪种分辨率方向或窗口大小,都可以使用它来计算窗口的位置。
#4楼
这是使用纯JavaScript的跨浏览器解决方案( 源 ):
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
#5楼
有时您需要在调整窗口和内部内容的大小时看到宽度/高度的变化。
为此,我编写了一个小脚本,其中添加了一个对话框,该对话框可以动态监视所有调整大小并立即进行更新。
它添加了具有固定位置和高z-index的有效HTML,但是足够小,因此您可以 :
在实际站点上使用
用它来测试移动/响应视图
经过测试:Chrome 40,IE11,但也很可能也可以在其他/旧版浏览器上工作... :)
function gebID(id){ return document.getElementById(id); }
function gebTN(tagName, parentEl){
if( typeof parentEl == "undefined" ) var parentEl = document;
return parentEl.getElementsByTagName(tagName);
}
function setStyleToTags(parentEl, tagName, styleString){
var tags = gebTN(tagName, parentEl);
for( var i = 0; i
}
function testSizes(){
gebID( 'screen.Width' ).innerHTML = screen.width;
gebID( 'screen.Height' ).innerHTML = screen.height;
gebID( 'window.Width' ).innerHTML = window.innerWidth;
gebID( 'window.Height' ).innerHTML = window.innerHeight;
gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;
gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;
}
var table = document.createElement('table');
table.innerHTML =
"
SOURCEWIDTHxHEIGHT"+"
screenx"+"
windowx"+"
document.documentElementx"
+"
document.bodyx";
gebTN("body")[0].appendChild( table );
table.setAttribute(
'style',
"border: 2px solid black !important; position: fixed !important;"
+"left: 50% !important; top: 0px !important; padding:10px !important;"
+"width: 150px !important; font-size:18px; !important"
+"white-space: pre !important; font-family: monospace !important;"
+"z-index: 9999 !important;background: white !important;"
);
setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );
setInterval( testSizes, 200 );
编辑:现在样式仅适用于记录器表元素-不适用于所有表-这也是一个无jQuery的解决方案:)