JavaScript中有关高度和宽度的API介绍
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript中有关高度和宽度的API介绍相关的知识,希望对你有一定的参考价值。
javascript世界中,有很多看起来能够帮我们知道网页宽度和高度的API,但太繁多了,而且容易弄混、不容易区分它们。下面我就来介绍一下,这些API到底是什么意思,之间的区别又在哪里。
一、设备的分辨率
window.screen.width × window.screen.height
台式机:1440 × 900 / 手机:360 × 640
二、浏览器的分辨率
window.screen.availWidth × window.screen.availHeight
台式机Chrome:1440 × 860 / 手机:360 × 640
设备和在设备上安装的浏览器只要不更改,它们的分辨率保持不变
在台式机设备中,浏览器分辨率的高度 = 设备分辨率的高度 - 40px;设备分辨率的宽度包含了滚动条宽度
三、窗口视口(能看到的网页区域)的宽高
window.innerWidth × window.innerHeight
台式机Chrome:1440 × 797 / 手机:360 × 518
window.innerWidth在台式机设备中,包含滚动条宽度;window.innerHeight会随菜单和书签栏的隐藏、显示发生改变
IE8不支持这两个属性
可以把这两个属性作为响应式布局的依据
四、文档文件的宽高
(完)
以上是关于JavaScript中有关高度和宽度的API介绍的主要内容,如果未能解决你的问题,请参考以下文章