如何获取windowWidth、windowHeight、pageWidth、pageHeight、screenWidth、screenHeight、pageX、pageY、screenX、screenY,这些都可以在所有主要浏览器中使用?
当前回答
您还可以获得窗口的宽度和高度,避免浏览器工具栏和其他东西。这是浏览器窗口中的真正可用区域。
为此,请使用:window.innerWidth和window.inerHeight财产(请参阅w3schools上的文档)。
在大多数情况下,这将是最好的方式,例如,显示一个完全居中的浮动模式对话框。它允许您计算窗口上的位置,无论使用浏览器的分辨率方向或窗口大小如何。
其他回答
您可以使用jQuery获取窗口或文档的大小:
// Size of browser viewport.
$(window).height();
$(window).width();
// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();
对于屏幕大小,可以使用屏幕对象:
window.screen.height;
window.screen.width;
这是我的解决方案!
//内部宽度常量screen_viewport_inner=()=>{设w=窗口,i=“内部”;if(!(窗口中的`innerWidth`)){i=“客户端”;w=document.documentElement | | document.body;}返回{width:w[`${i}宽度`],高度:w[`${i}高度`]}};//外侧宽度常量screen_viewport_outer=()=>{设w=窗口,o=“外部”;if(!(窗口中的`outerWidth`)){o=“客户端”;w=document.documentElement | | document.body;}返回{width:w[`${o}宽度`],高度:w[`${o}高度`]}};//样式常量console_color=`颜色:rgba(0255,0,0.7);字体大小:1.5rem;边框:1px纯红色;`;//测试常量测试=()=>{让i_obj=screen_viewport_inner();console.log(`%c screen_viewport_inner=\n`,console_color,JSON.stringfy(i_obj,null,4));让o_obj=screen_viewport_out();console.log(`%c screen_viewport_outer=\n`,console_color,JSON.stringify(o_obj,null,4));};//生命(() => {测试();})();
随着globalThis在ES2020中的引入,您可以像使用财产一样使用。
对于屏幕大小:
globalThis.screen.availWidth
globalThis.screen.availHeight
对于窗口大小
globalThis.outerWidth
globalThis.outerHeight
对于偏移:
globalThis.pageXOffset
globalThis.pageYOffset
…等等。
alert(“屏幕宽度:”+globalThis.Screen.avaidWidth+“\n屏幕高度:”+globalThis.Screen.avaidHeight)
这里是一个纯JavaScript的跨浏览器解决方案(源代码):
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
在某些情况下,与响应布局相关的$(document).height()可能会返回错误的数据,仅显示视图端口高度。例如,当某个div#wrapper的高度为100%时,该#wrappers可以被其内部的某个块拉伸。但它的高度仍将与视口高度相同。在这种情况下,您可以使用
$('#wrapper').get(0).scrollHeight
表示包装器的实际大小。
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求