如何获取windowWidth、windowHeight、pageWidth、pageHeight、screenWidth、screenHeight、pageX、pageY、screenX、screenY,这些都可以在所有主要浏览器中使用?
当前回答
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上测试了它
其他回答
这有您需要知道的一切:获取视口/窗口大小
但简而言之:
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);
不停摆弄
请停止编辑此答案。它已经被不同的人编辑了22次,以符合他们的代码格式偏好。也有人指出,如果你只想瞄准现代浏览器,这是不需要的——如果是的话,你只需要以下内容:
const width = window.innerWidth || document.documentElement.clientWidth ||
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight||
document.body.clientHeight;
console.log(width, height);
随着globalThis在ES2020中的引入,您可以像使用财产一样使用。
对于屏幕大小:
globalThis.screen.availWidth
globalThis.screen.availHeight
对于窗口大小
globalThis.outerWidth
globalThis.outerHeight
对于偏移:
globalThis.pageXOffset
globalThis.pageYOffset
…等等。
alert(“屏幕宽度:”+globalThis.Screen.avaidWidth+“\n屏幕高度:”+globalThis.Screen.avaidHeight)
使用“控制台”或单击“检查”后,检查任何网站当前加载页面的高度和宽度。
步骤1:单击鼠标右键,单击“检查”,然后单击“控制台”
步骤2:确保您的浏览器屏幕不应处于“最大化”模式。如果浏览器屏幕处于“最大化”模式,您需要首先单击最大化按钮(位于右上角或左上角),然后取消最大化。
步骤3:现在,在大于号('>')后面写以下内容,即。
> window.innerWidth
output : your present window width in px (say 749)
> window.innerHeight
output : your present window height in px (say 359)
我写了一个小javascript bookmarklet,可以用来显示大小。您可以轻松地将其添加到浏览器中,无论何时单击它,您都会在浏览器窗口的右角看到其大小。
在这里您可以找到如何使用bookmarklet的信息https://en.wikipedia.org/wiki/Bookmarklet
小书签
javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);
原始代码
原始代码在咖啡中:
(->
addWindowSize = ()->
style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
$windowSize = $('<div style="' + style + '"></div>')
getWindowSize = ->
'<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'
$windowSize.html getWindowSize()
$('body').prepend $windowSize
$(window).resize ->
$windowSize.html getWindowSize()
return
if !($ = window.jQuery)
# typeof jQuery=='undefined' works too
script = document.createElement('script')
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
script.onload = addWindowSize
document.body.appendChild script
else
$ = window.jQuery
addWindowSize()
)()
基本上,代码是在前面添加一个小div,当您调整窗口大小时,它会更新。
获取可用屏幕维度的非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任务栏等)。
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求