<meta name="viewport" content="width=device-width;initial-scale=1">
移动页面开发时候头部常常用到这句meta；来定义移动设备viewport可视区域的大小；
在PC端的网站开发中，设计师按照某个分辨率设计的界面，PC端可以做到同尺寸大小的还原，但移动设备的屏幕尺寸较小，区别于PC端，可视范围有限，传统的网页在移动端浏览器却不能完全显示，所以移动端浏览器视口即viewport大小可以改变，以适应页面显示。
viewport俗称视口，用来描述一块区域，浏览器可以在这块区域上去排版、渲染网页。浏览器默认情况下，viewport可能比手机屏幕大很多。apple的viewport大小是980px。但是这样的网页即使能正确的显示出来也得缩放或者用滚动条，所以我们在写前端网页的时候，会用一个width=device-width的viewport，这样我们css里看到的屏幕总宽度大概在320px左右，1px代表的物理像素数会自动根据屏幕密度进行换算。
再来说说物理像素，设备像素，css像素，设备独立像素，设备分辨率，设备像素比，像素密度这几个概念。
这几个名词特别容易混淆。
物理像素其实就是设备像素，是设备上能控制显示的最小单位，这些像素可以看成是设备屏幕上的一个个点。
css像素就是我们在页面开发中定义元素宽高位置的单位，是web编程的一个概念，是抽象的，用于逻辑上衡量物理像素的单位。与物理像素之间存在对应关系，可以转换。
设备独立像素的概念包含了css像素，是虚拟像素。与屏幕密度有关。android机中CSS 像素就不叫”CSS像素”了而是叫”设备独立像素”。PC端和部分移动端通过screen.width/height 获取的这个值就是设备独立像素（CSS 像素），而不是设备的屏幕分辨率，因为设备的屏幕分辨率对于WEB开发者来说是无法通过代码来获得的。
设备分辨率即时指屏幕显示器的分辨率，通常设计师在涉及界面的时候会选取某个设备的分辨率作为界面分辨率。比如根据iphone6设备分辨率的大小设计的界面大小750px*1334px。
这样看来对这几个名词就有了一个具体的理解了。上面我们也说到物理像素和设备独立像素之间存在对应关系。那么就有了设备像素比这个东西。
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips
当页面设置了<meta name="viewport" content="width=device-width">
时候，document.documentElement.clientWidth
在大部分浏览器下，得到的是布局视区的宽度，等同于dips的宽度。对于screen.width的值：
在iOS视网膜设备上，screen.width返回dips宽。因此，在竖着显示的时候，视网膜显示屏的ipad和非视网膜显示屏的ipad返回的都是768。
而Android设备上，screen.width返回的是物理像素宽度。
PC端的时候设备像素比的值默认为1，即页面没有缩放的情况下一个物理像素 = 一个设备独立像素。JavaScript 中的window.devicePixelRatio
可以获取设备中的像素比值。例如iphone6的设备像素比为2；iphone 6plus的设备像素比为3。
PPI就是屏幕像素密度（pixel density）。PPI的值越高，画质越好，也就是越细腻，看起来更有逼格。PPI 值超过300的叫做超高密度屏幕，Apple 设备中叫超高密度屏幕为Retina视网膜屏幕。
另附：
var w1 = document.body.clientWidth,h1 = document.body.clientHeight; //body可视区域宽高
var w2 = window.innerWidth,h2 = window.innerHeight; //窗口宽高
var w3 = screen.width,h3 = screen.height; //设备屏幕宽高
var w = document.documentElement.clientWidth,h = document.documentElement.clientHeight; //浏览器视口的宽高
网友评论