我们要理解很多对象，好比逻辑辨别率、物理辨别率、缩放因子、ppi等，这里先不讨论。

首先呢，我们先介绍下各个屏幕宽度：

网页缩放后可用宽度: window.innerWidth 网页缩放后可用高度: window.innerHeight 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包孕边线的宽) 网页可见区域高： document.body.offsetHeight (包孕边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHeight 网页被卷去的高： document.body.scrollTop 网页被卷去的左： document.body.scrollLeft 网页正文部分上： window.screenTop 网页正文部分左： window.screenLeft 屏幕物理辨别率的高： window.screen.height 屏幕物理辨别率的宽： window.screen.width 屏幕可用事情区高度： window.screen.availHeight 屏幕可用事情区宽度： window.screen.availWidth 屏幕缩放因子：window.devicePixelRatio 屏幕逻辑辨别率：window.screen.width * window.devicePixelRatio (缩放因子与物理辨别率的乘积)**</font>

下面，我将分袂在差别设备上的演示后的功效截图如下：

iPhone5

iPhone6

iPad

PC

那么大家按照这些，多理解理解这些数据。

我们在移动端开发时，在标签中插手

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 这句话帮我们解决了很多问题，我们只要凭据设备物理像素的巨细来进行开发就行了。 其时做记录的时候忘记记录原文链接了,作者看到之后可以私信我,我补上原文链接.

js获取设备宽度信息

，