移动端与PC端的viewport

　　第一种解析：

• 设备像素，就是我们直觉上觉得"靠谱"的像素，这些像素为所使用的各种设备提供了正规的分辨率，并且其值可以通过（通常情况下）从screen.width/height属性中读出；
• css像素，就是css自定义的像素，需要注意的是css像素与设备像素不是一回事；

 　　第二种解析：

• CSS pixels： 浏览器使用的抽象单位， 主要用来在网页上绘制内容。
• device pixels： 显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。

 

PPI（DPI）的计算公式：

　　1 css pixels = (devicePixelRatio)^2 device pixels

　　以iphone 4(960px * 640px)来作为计算的事例：

　　　　手机屏幕的对角线等效像素 = 960^2 + 640^2

如何获取屏幕的尺寸：

 可以通过使用screen.width/height来获取，获取出来的值就是用户屏幕的整体大小；

度量单位：设备像素；

浏览器：IE7&IE8都存在以css像素对其进行度量的问题；

注意：在ios和android会存在不同的区别；

 

窗口尺寸：

window.innerWidth/Height , 浏览器窗口的整体大小，包括滚动条，当然不包括浏览器的菜单栏，地址栏，度量单位：css像素，浏览器IE7不支持，opera以设备像素进行度量。

 

参考文章：详情请见于此处

转载于:https://www.cnblogs.com/shuman/p/3900854.html