如何获取windowWidth、windowHeight、pageWidth、pageHeight、screenWidth、screenHeight、pageX、pageY、screenX、screenY,这些都可以在所有主要浏览器中使用?
当前回答
您可以使用Screen对象获取此信息。
以下是它将返回的内容的示例:
Screen {
availWidth: 1920,
availHeight: 1040,
width: 1920,
height: 1080,
colorDepth: 24,
pixelDepth: 24,
top: 414,
left: 1920,
availTop: 414,
availLeft: 1920
}
要获得screenWidth变量,只需使用screen.width,与screenHeight相同,只需选择screen.height。
要获取窗口宽度和高度,请分别为screen.availWidth或screen.avail height。
对于pageX和pageY变量,请使用window.screenX或Y。请注意,这是从非常左/最左/最上的屏幕开始的。因此,如果您有两个宽度为1920的屏幕,那么右屏幕左侧500px的窗口的X值将为2420(1920+500)。然而,screen.width/height显示当前屏幕的宽度或高度。
要获取页面的宽度和高度,请使用jQuery的$(window).height()或$(window).width()。
再次使用jQuery,为pageX和pageY值使用$(“html”).offset().top和$(“html”).ooffset().left。
其他回答
图形答案:(............)
2020年全年
我很惊讶这个问题有大约10年的时间,而且到目前为止似乎还没有人给出完整的答案(有10个值)。所以我仔细分析了OP问题(尤其是图片),并发表了一些评论
坐标系(0,0)的中心位于视口(浏览器窗口,没有条和主边框)的左上角,轴指向右下(OP图片上标记的内容),因此pageX、pageY、screenX、screenY的值必须为负值(如果页面较小或未滚动,则为零)对于screenHeight/Width,OP希望计算屏幕高度/宽度,包括系统菜单栏(例如,在MacOs中)-这就是为什么我们不使用.avaidWidth/height(不计算)的原因对于windowWidth/Height,OP不想计算滚动条的大小,所以我们使用.clientWidth/Heith在下面的解决方案中,我们将screenY添加到浏览器左上角的位置(window.screenY),即其菜单/表格/url栏的高度)。但如果下载底部栏出现在浏览器中和/或开发人员控制台在页面底部打开,则很难计算该值——在这种情况下,该值将随着下面的解决方案中该栏/控制台高度的大小而增加。可能不可能读取杆/控制台高度值以进行校正(没有一些技巧,如在测量之前要求用户关闭杆/控制台…)pageWidth-在pageWidth小于windowWidth的情况下,我们需要手动计算<body>子元素的大小以获得该值(我们在下面的解决方案中的contentWidth中进行了示例计算-但通常情况下这可能很困难)为了简单起见,我假设<body>margin=0-如果不是,那么在计算pageWidth/Height和pageX/Y时应该考虑这个值
函数大小(){constcontentWidth=[…document.body.childred].reduce((a,el)=>数学最大值(a,el.getBoundingClientRect().right),0)-document.body.getBoundingClientRect().x;返回{windowWidth:document.documentElement.clientWidth,windowHeight:document.documentElement.clientHeight,pageWidth:数学最小值(document.body.scrollWidth,contentWidth),pageHeight:document.body.scrollHeight,screenWidth:window.screen.width,screenHeight:window.screen.height,pageX:document.body.getBoundingClientRect().x,pageY:document.body.getBoundingClientRect().y,screenX:-window.screenX,screenY:-window.screenY-(window.outerHeight window.innerHeight),}}//测试函数show(){console.log(sizes());}正文{边距:0}.box{width:3000px;height:4000px;background:red;}<div class=“box”>警告:stackoverflow片段给出了错误的screenX-Y值,但如果您将此代码直接复制到页面,则值将正确<br><button onclick=“show()”style=“”>CALC</button></div>
我在Mac OS High Sierra上的Chrome 83.0、Safari 13.1、Firefox 77.0和Edge 83.0上测试了它
获取可用屏幕维度的非jQuery方法。window.screen.width/height已经发布,但为了响应Web设计和完整性,我认为值得提及这些属性:
alert(window.screen.availWidth);
alert(window.screen.availHeight);
http://www.quirksmode.org/dom/w3c_cssom.html#t10 :
availWidth和availHeight-屏幕(不包括OS任务栏等)。
有时您需要在调整窗口大小和内部内容时查看宽度/高度的变化。
为此,我编写了一个小脚本,它添加了一个日志框,动态地监视所有的大小调整和几乎立即的更新。
它添加了一个具有固定位置和高z索引的有效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<tags.length; i++ ) tags[i].setAttribute('style', styleString);
}
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 =
"<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
+"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
+"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
+"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
+"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
;
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免费解决方案:)
但是当我们谈论响应屏幕时,如果出于某种原因我们想使用jQuery处理它,
window.innerWidth, window.innerHeight
给出正确的测量值。即使它删除了滚动条的额外空间,我们也不必担心调整空间:)
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求