码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript中有关高度和宽度的API介绍

时间:2016-09-13 16:06:34      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

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介绍

标签:

原文地址:http://www.cnblogs.com/zhangbao/p/5868676.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!