资讯专栏INFORMATION COLUMN

JS 获取屏幕、浏览器、页面的高度宽度

Alan / 1453人阅读

摘要:即屏幕高度减去上下任务栏后的高度,可表示为软件最大化时的高度。浏览器内页面可用高度此高度包含了水平滚动条的高度若存在。可表示为浏览器当前宽度去除浏览器边框后的宽度。页面信息总高度。展示的高度表示在浏览器内显示的区域高度。

(草稿)

屏幕信息

screen.height :屏幕高度。

screen.width :屏幕宽度。

screen.availHeight :屏幕可用高度。即屏幕高度减去上下任务栏后的高度,可表示为软件最大化时的高度。

screen.availWidth :屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度,可表示为软件最大化时的宽度。

任务栏高/宽度 :可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如:任务栏高度 = screen.height - screen.availHeight

浏览器信息

window.outerHeight :浏览器高度。

window.outerWidth :浏览器宽度。

window.innerHeight :浏览器内页面可用高度;此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。

window.innerWidth :浏览器内页面可用宽度;此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

工具栏高/宽度 :包含了地址栏、书签栏、浏览器边框等范围。如:高度,可通过浏览器高度 - 页面可用高度得出,即:window.outerHeight - window.innerHeight

页面信息

body.offsetHeight :body总高度。

body.offsetWidth :body总宽度。

body.clientHeight :body展示的高度;表示body在浏览器内显示的区域高度。

body.clientWidth :body展示的宽度;表示body在浏览器内显示的区域宽度。

滚动条高度/宽度 :如高度,可通过浏览器内页面可用高度 - body展示高度得出,即window.innerHeight - body.clientHeight

参见:HTML 获取屏幕、浏览器、页面的高度宽度

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84554.html

相关文章

  • 关于JS、JQ获取可视区域高度宽度以及屏幕分辨率那些事

    摘要:用和获取相关属性网页可见区域宽网页可见区域高网页可见区域宽包括边框的宽网页可见区域高包括边框的高网页正文全文宽网页正文全文高网页下滑的距离网页左滑的距离屏幕分辨率的高屏幕分辨率的宽屏幕可用工作区的高屏幕可用工作区的高浏览器可视区域的内宽度, 用JS和JQ获取相关属性 JavaScript document.body.clientWidth;//网页可见区域宽document.body....

    or0fun 评论0 收藏0
  • 移动web开发问题和经验总结

    摘要:的事件默认绑在上的抓包浏览器连接安卓机测试实用网站适配测试兼容性网站前端开发雅虎条优化准则 前言 这里大部分是自己遇到过的情况,还有一部分借鉴了同行的文章,如果大家有遇到其它坑,欢迎提出来一起研究。 知识要点 1. Meta标签 1.禁止用户缩放页面,页面强制让文档的宽度与设备的宽度保持1:1 2.禁止ios上自动识别电话 3.禁止android上自动识别邮箱 4.针对ios上的...

    MorePainMoreGain 评论0 收藏0
  • 移动web开发问题和经验总结

    摘要:的事件默认绑在上的抓包浏览器连接安卓机测试实用网站适配测试兼容性网站前端开发雅虎条优化准则 前言 这里大部分是自己遇到过的情况,还有一部分借鉴了同行的文章,如果大家有遇到其它坑,欢迎提出来一起研究。 知识要点 1. Meta标签 1.禁止用户缩放页面,页面强制让文档的宽度与设备的宽度保持1:1 2.禁止ios上自动识别电话 3.禁止android上自动识别邮箱 4.针对ios上的...

    yexiaobai 评论0 收藏0
  • 移动web开发问题和经验总结

    摘要:的事件默认绑在上的抓包浏览器连接安卓机测试实用网站适配测试兼容性网站前端开发雅虎条优化准则 前言 这里大部分是自己遇到过的情况,还有一部分借鉴了同行的文章,如果大家有遇到其它坑,欢迎提出来一起研究。 知识要点 1. Meta标签 1.禁止用户缩放页面,页面强制让文档的宽度与设备的宽度保持1:1 2.禁止ios上自动识别电话 3.禁止android上自动识别邮箱 4.针对ios上的...

    Wildcard 评论0 收藏0

发表评论

0条评论

Alan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<