name="viewport" width="device-width" 到底都是啥

[TOC]
参考文件：CSS Pixel与绝对像素
参考文件：移动端适配- dpr浅析
参考文件：pixel is not a pixel is not a pixel
参考文件：此像素非彼像素
参考文件：关于HTML5中meta name=”viewport” 的用法
拓展链接：像素是什么

移动端页面渲染过程：

打开一个页面，移动端浏览器会自动寻找,如果指定了视窗口的width，就会把页面放到指定width的viewport里面。如果没有指定，则默认值有的是980，具体根据浏览器来定的。
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

上述代码可以解决这个问题。
width：控制 layout viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

viewport是什么?

一般来说，在移动浏览器上页面渲染是在一个叫viewport的页面绘制区域内。
手机浏览器把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

• layout viewport：是网页的所有内容，他可以全部或者部分展示给用户。
• visual viewport：是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。

viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用window.innerHeight还是window.screen.width拿到的都是320px。

当然我们可以通过meta设置改变viewport的比例，如initial-scale=.5就可以让viewport和屏幕一致的尺寸，这个比例在不同的手机上并不一定是2倍关系，特别是Android手机。而且改变viewport比例后可能会导致后续制作中出现一系列问题。另外Android系统中可以在viewport设置target-densitydpi=device-dpi让viewport的尺寸和屏幕真实尺寸保持一致，但iOS不起作用，所以这个方法不具有普遍性。不要纠结一定要拿到屏幕真实尺寸，就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。

例如：当你打开一个960px设计的网页时，手机会根据css中的百分比进行缩放。比如总长960的页面，导航条是20%。（实际解析出来就是192px）但是你不可能每个属性都是百分比吧，比如文字大小。那么我用320px屏幕打开，导航条就成了64px了，但是我的字体大小是12px啊，完了，本来能显示很多汉字的（192/12）现在只能显示64/12个汉字了。

Apple找到了一个办法：在移动版(iOS)的Safari中定义了viewport meta标签①，它的作用就是创建一个虚拟的窗口(viewport)，而且这个虚拟窗口的分辨率接近于桌面显示器，Apple将其定位为980px②。

①除此之外不同移动浏览器厂商也有不同的解决方案，例如UCweb就是使用中间件技术。
②不同的浏览器厂商对于layout viewport的大小定义不同

Safari iPhone: 980px
Opera: 850px
Android WebKit: 800px
IE: 974px

涉及显示的几个概念

物理像素与CSS像素

设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。
CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。

分辨率(物理像素)

screen.height //screen.width返回显示设备的信息。
除非调整显示设备的分辨率，否则看作是常量。

(显示)分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平像素数为160个，垂直像素数128个。

分辨率越高，像素的数目越多，感应到的图像越精密。

而在屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。

以分辨率为1024×768的屏幕来说，即每一条水平线上包含有1024个像素点，共有768条线，即扫描列数为1024列，行数为768行。

分辨率不仅与显示尺寸有关，还受显像管点距、视频带宽等因素的影响。其中，它和刷新频率的关系比较密切，严格地说，只有当刷新频率为“无闪烁刷新频率”，显示器能达到最高多少分辨率，才能称这个显示器的最高分辨率为多少。

PPI

pixels per inch所表示的是每英寸所拥有的像素（pixel）数目。

手机屏幕的PPI当达到一定数值时，人眼就分辨不出颗粒感了。

这个数值是多少？按照2010年前苹果公司CEO史蒂夫·乔布斯（Steve Jobs）在iPhone 4发布会上对视网膜技术的介绍：“当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个‘神奇数字’（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了。”(即所谓的retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。)

那么，是不是屏幕PPI超过这个数值就没有意义了？
==>除PPI之外，还看它的饱和度，渲染度。

DPR设备像素比

DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值：

DPR = 设备像素 / CSS像素(某一方向上)
普通密度桌面显示屏的devicePixelRatio=1
高密度桌面显示屏(Mac Retina)的devicePixelRatio=2
主流手机显示屏的devicePixelRatio=2或3

因为大部分桌面显示器的devicePixelRatio为1，所以在PC端我们感受不出来CSS Pixel 与 物理像素的差别。
举个栗子来说，一张100x100的图片，通过CSS设置它width:100px; height:100px; 。在电脑上打开，没有什么问题，但是在手机上打开，屏幕按照逻辑分辨率来渲染，假设手机的devicePixelRatio=3，那么就相当于拿3个物理像素来描绘1个电子像素。这等于拿一个三倍的放大镜去看你的图片，你的图片可能因此变得模糊，因为细节不够。所以一般明智的做法是把图片换成300x300的，CSS宽高不变，这样在手机上展示时，CSS宽高换算成物理像素是300x300，你的图片也是300x300，就不会变糊了。

常用移动设备的PPI与DPR