CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

一、PX(CSS pixels)

1.1 定义

虚拟像素，能够理解为“直觉”像素，CSS和JS使用的抽象单位，浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px。

1.2 注意

在CSS规范中，长度单位能够分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。

在一样一个设备上，每1个CSS像素所表明的物理像素是能够变化的(即CSS像素的第一方面的相对性); 

在不一样的设备之间，每1个CSS像素所表明的物理像素是能够变化的(即CSS像素的第二方面的相对性);

1.3 那么PX究竟是什么？

px实际是pixel（像素）的缩写，根据 维基百科的解释，它是图像显示的基本单元，既不是一个肯定的物理量，也不是一个点或者小方块，而是一个抽象概念。因此在谈论像素时必定要清楚它的上下文！必定要清楚它的上下文！必定要清楚它的上下文！

不一样的设备，图像基本采样单元是不一样的，显示器上的物理像素等于显示器的点距，而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别称为ppi和dpi：

ppi：每英寸多少像素数，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。

dpi：每英寸多少点。

关于打印机的点距咱们不去关心，只要知道 当用于描述显示器设备时ppi与dpi是同一个概念 。

1.4 CSS像素的真正含义

因为不一样的物理设备的物理像素的大小是不同的，因此css认为浏览器应该对css中的像素进行调节，使得浏览器中 1css像素的大小在不一样物理设备上看上去大小老是差很少 ，目的是为了保证阅读体验一致。为了达到这一点浏览器能够直接按照设备的物理像素大小进行换算，而css规范中使用**"参考像素"**来进行换算。

1参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。它并非1/96英寸长度，而是从一臂之遥的距离处看解析度为96DPI的设备输出一单位（即1/96英寸）时视线与水平线的夹角。一般认为常人臂长为28英寸，因此它的视角是:
(1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

因为css像素是一个视角单位，因此在真正实现时，为了方便基本都是根据设备像素换算的。浏览器根据硬件设备可以直接获取css像素

1.5 举个栗子来理解css像素的相对性

做为Web开发者，咱们接触的更多的是用于控制元素样式的样式单位像素。这里的像素咱们称之为CSS像素。

CSS像素有什么特别的地方？咱们能够借用quirksmode中的这个例子：

假设咱们用PC浏览器打开一个页面，浏览器此时的宽度为800px，页面上同时有一个400px宽的块级元素容器。很明显此时块状容器应该占页面的一半。

但若是咱们把页面放大（经过“Ctrl键”加上“+号键”），放大为200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。

吊诡的是此时咱们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，可是它看上去却变大了一倍——这是由于咱们把CSS像素放大为了原来的两倍。

CSS像素与屏幕像素1：1一样大小时：

CSS像素(黑色边框)开始被拉伸，此时1个CSS像素大于1个屏幕像素

也就是说默认状况下一个CSS像素应该是等于一个物理像素的宽度的，可是浏览器的放大操做让一个CSS像素等于了两个设备像素宽度。在后面你会看到更复杂的状况，在高PPI的设备上，CSS像素甚至在默认状态下就至关于多个物理像素的尺寸。

从上面的例子能够看出，CSS像素历来都只是一个相对值。

二、DP(device pixels)

2.1 定义

设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，经过控制每一个像素点的颜色，使屏幕显示出不一样的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。

2.2 注意

pt在css单位中属于真正的绝对单位，1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米。

不一样的设备，其图像基本单位是不一样的，好比显示器的点距，能够认为是显示器的物理像素。如今的液晶显示器的点距通常在0.25mm到0.29mm之间。而打印机的墨点，也能够认为是打印机的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。

注意，咱们一般所说的显示器分辨率，实际上是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过如今液晶显示器成为主流，因为液晶的显示原理与CRT不一样，只有在桌面分辨率与物理分辨率一致的状况下，显示效果最佳，因此如今咱们的桌面分辨率几乎老是与显示器的物理分辨率一致了。

2.3 小知识

小知识:屏幕广泛采用RGB色域(红、绿、蓝三个子像素构成),而印刷行业广泛使用CMYK色域(青、品红、黄和黑)

2.4 设备像素(DP)与CSS像素之间的关系

得到设备像素比（dpr）后，即可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。
因此，有以下公式：

DPR = 设备像素/CSS像素

三、DIP(Device independent Pixel)

设备独立像素，也称为逻辑像素，简称dip。
根据上述设备像素与CSS像素之间的关系、及DPR的官方定义，咱们能够推断出：

CSS像素 =设备独立像素 = 逻辑像素

下面，仍是引用 http://www.cnblogs.com/2050/p/3877280.html 文中的内容说明：

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。
CSS像素就能够看作是设备的独立像素，因此经过devicePixelRatio，咱们能够知道该设备上一个css像素表明多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素至关于2个物理像素。可是要注意的是，devicePixelRato在不一样的浏览器中还存在些许的兼容性问题，因此咱们如今还并不能彻底信赖这个东西，具体的状况能够看下这篇文章。

为何是“每四个一组”？并且要让这四个一组来显示“原来屏幕的一个像素”？这大概就是 Retina 显示技术的一种表现吧。而这“每四个一组”的“大像素”，能够被称做“设备独立像素”，device independent pixel ，或者 density-independentpixel ，它能够是系统中的一个点，这个点表明一个能够由程序使用的虚拟像素，而后由相关系统转换为物理像素。

“设备独立像素”也有人称为“CSS像素”，一种形象的说法，更倾向于代表与 CSS 中尺寸的对应。

设备独立像素与物理像素的对应关系，能够这样看：

相似的每四个一组的对应关系，也许正是 Retina 显示技术所作的。

四、DPR(device pixels ratio)

4.1 定义

设备像素比（dpr 描述的是未缩放状态下，物理像素和CSS像素的初始比例关系，计算方法以下图。

4.2 理解

设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素，如2表明1个css像素用2x2个设备像素来绘制。

设备像素比(dpr)，公式为1px = (dpr)^2 * 1dp，能够理解为1px由多少个设备像素组成；

五、PPI(pixels per inch)

5.1 定义

每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的状况。

5.2 ppi是如何计算出来的呢？

顾名思义，每英寸的像素点（设备像素），已知屏幕分辨率和主对角线的尺寸，则ppi等于
以爱疯6为例：

var 斜边尺寸 = V(1920^2+1080^2) V表明开根号 
var ppi = 斜边尺寸/5.5 
ppi = 401ppi

咱们知道，ppi越高，每英寸像素点越多，图像越清晰；咱们能够类比物体的密度，密度越大，单位体积的质量就越大，ppi越高，单位面积的像素越多。

5.3 ppi和dpr到底什么关系？

毕竟这些参数是外国人先发明的，他们会优先选择本身熟悉的计量单位做为显示设备的工厂标准参数，所以ppi就用做显示设备的工业标准；

告诉业界人士，ppi达到多少是高清屏，此时对应的dpr是多少，而不直接告诉你我如今的显示设备dpr是多少，毕竟人们直接听到像素分辨率会更加有反应。

设备像素比与ppi相关，通常是ppi/160的整数倍：

六、倍率与逻辑像素

6.1 基本关系

用iPhone 3gs和4s来举例。假设有个邮件列表界面，咱们不妨按照PC端网页设计的思惟来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，并且每行会变得特别宽。但两款手机实际上是同样大的。若是照这种方式显示，3gs上刚恰好的效果，在4s上就会小到根本看不清字。

在现实中，这二者效果倒是同样的。这是由于Retina屏幕把2x2个像素当1个像素使用。好比本来44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。致使界面元素都变成2倍大小，反而和3gs效果同样了。画质却更清晰。

在之前，iOS应用的资源图片中，同一张图一般有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会本身判断用哪张，Android道理也同样。

由此能够看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就获得逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

6.2 Retina显示屏

这是一种显示技术，能够将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提升屏幕显示的细腻程度，这种分辨率在正常观看距离下足以令人肉眼没法分辨其中的单独像素。

最早使用retina屏幕是iphone 4，屏幕分辨率为960 * 640（326ppi）。

对好比下两幅图，能够清晰地看出是否 Retina 屏的显示差别：

图2 iPhone 3GS

图3 iPhone 4

两代iPhone 的物理尺寸（屏幕宽高有多少英寸）是同样的，从上图能够看出，iphone 4的显示效果要明显好于iphone 3GS，虽然 iPhone 4 分辨率提升了，但它不一样于普通的电脑显示器那样为了显示更多的内容，而是提高显示相同内容时的画面精细程度。这种提高方式是靠提高单位面积屏幕的像素数量，即像素密度来提高分辨率，这样作的主要目的是为了提升屏幕显示画面的精细程度。以第三代 MacBook Pro with Retina Display为例， 工做时显卡渲染出的2880x1880个像素每四个一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度是原来的4倍。

注意：在桌面显示器中，咱们调整了显示分辨率，好比从 800 * 600 调整到 1024 * 768 时，屏幕的文字图标会变小，显示的内容更多了。但 Retina 显示方式不会产生这样的问题，或者说， Retina 显示技术解决的是显示画面精细程度的问题，而不是解决显示内容容量的问题。

七、分辨率、像素和屏幕尺寸

PPI 说的是像素密度，而分辨率说的是块屏幕的像素尺寸，譬如说 1334*750 就是 iPhone（6~7）的分辨率，说 iPhone（6~7）的分辨率是 326 是错误的表述，326 是它的像素密度，单位是 PPI。

询问别人一粒像素有多大是一个很是鸡贼的问题（当心面试遇到这样的题），虽然咱们说像素是构成屏幕的发光的点，是物理的，可是像素在脱离了屏幕尺寸以后是没有大小可言的，你能够将 1920 * 1080 颗像素放到一台 40 寸的小米电视机里面，也能够将一样多的像素所有塞到一台 5.5 寸的 iPhone7 Plus 手机里面去，那么对于 40 寸的电视而言，每一个像素颗粒固然会大于 5.5 寸的手机的像素。

因此光看屏幕的分辨率对于设计师来讲是不具有多少实际意义的，经过分辨率计算得出的像素密度（PPI）才是设计师要关心的问题，咱们经过屏幕分辨率和屏幕尺寸就能计算出屏幕的像素密度的。

再次使用 iPhone（6~7）做为例子。咱们知道该屏幕的横向物理尺寸为 2.3 英寸 ，且横向具备 750 颗像素，根据下面的公式，咱们可以算出 iPhone（6~7）的屏幕是 326 PPI，意为每寸存在 326 颗像素。

其实不论咱们怎么除，计算得出来的像素密度（PPI）都会是这个数，宽存在像素除以宽物理长度，高存在像素除以高物理长度，得数都接近于 326。

八、Viewport

8.1 PPK的关于三个viewport的理论

ppk大神对于移动设备上的viewport有着很是多的研究（第一篇，第二篇，第三篇），有兴趣的同窗能够去看一下，本文中有不少数据和观点也是出自那里。ppk认为，移动设备上有三个viewport。

首先，移动设备上的浏览器认为本身必须能让全部的网站都正常显示，即便是那些不是为移动设备设计的网站。但若是以浏览器的可视区域做为viewport的话，由于移动设备的屏幕都不是很宽，因此那些为桌面浏览器设计的网站放到移动设备上显示时，必然会由于移动设备的viewport太窄，而挤做一团，甚至布局什么的都会乱掉。也许有人会问，如今不是有不少手机分辨率都很是大吗，好比768x1024，或者1080x1920这样，那这样的手机用来显示为桌面浏览器设计的网站是没问题的吧？前面咱们已经说了，css中的1px并非表明屏幕上的1px，你分辨率越大，css中1px表明的物理像素就越多，devicePixelRatio的值也越大，这很好理解，由于你分辨率增大了，但屏幕尺寸并无变大多少，必须让css中的1px表明更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差很少，否则就会由于过小而看不清。因此在1080x1920这样的设备上，在默认状况下，也许你只要把一个div的宽度设为300多px（视devicePixelRatio的值而定），就是满屏的宽度了。回到正题上来，若是把移动设备上浏览器的可视区域设为viewport的话，某些网站就会由于viewport太窄而显示错乱，因此这些浏览器就决定默认状况下把viewport设为一个较宽的值，好比980px，这样的话即便是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫作 layout viewport。
   
这个layout viewport的宽度能够经过document.documentElement.clientWidth 来获取。

然而，layout viewport 的宽度是大于浏览器可视区域的宽度的，因此咱们还须要一个viewport来表明 浏览器可视区域的大小，ppk把这个viewport叫作 visual viewport 。visual viewport的宽度能够经过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中没法正确获取。

如今咱们已经有两个viewport了：layout viewport 和  visual viewport。但浏览器以为还不够，由于如今愈来愈多的网站都会为移动设备进行单独的设计，因此必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是，首先不须要用户缩放和横向滚动条就能正常的查看网站的全部内容；第二，显示的文字的大小是合适，好比一段14px大小的文字，不会由于在一个高密度像素的屏幕里显示得过小而没法看清，理想的状况是这段14px的文字不管是在何种密度屏幕，何种分辨率下，显示出来的大小都是差很少的。固然，不仅是文字，其余元素像图片什么的也是这个道理。ppk把这个viewport叫作 ideal viewport，也就是第三个viewport——移动设备的理想viewport。

ideal viewport并无一个固定的尺寸，不一样的设备拥有有不一样的ideal viewport。全部的iphone的ideal viewport宽度都是320px，不管它的屏幕宽度是320仍是640，也就是说，在iphone中，css中的320px就表明iphone屏幕的宽度。

可是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等，关于不一样的设备ideal viewport的宽度都为多少，能够到http://viewportsizes.com去查看一下，里面收集了众多设备的理想宽度。

再总结一下：ppk把移动设备上的viewport分为 layout viewport 、 visual viewport 和 ideal viewport 三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，不管在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不须要用户手动缩放，也不须要出现横向滚动条，均可以完美的呈现给用户。

 

8.2 利用meta标签对viewport进行控制

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，咱们须要的是ideal viewport。那么怎么才能获得ideal viewport呢？这就该轮到meta标签出场了。

咱们在开发移动设备的网站时，最多见的的一个动做就是把下面这个东西复制到咱们的head标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

该meta标签的做用是让当前viewport的宽度等于设备的宽度，同时不容许用户手动缩放。也许允不容许用户缩放不一样的网站有不一样的要求，但让viewport的宽度等于设备的宽度，这个应该是你们都想要的效果，若是你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

这个name为viewport的meta标签到底有哪些东西呢，又都有什么做用呢？

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证实这个东西仍是很是有用的。

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，以下：

这些属性能够同时使用，也能够单独使用或混合使用，多个属性同时使用时用逗号隔开就好了。

此外，在安卓中还支持  target-densitydpi  这个私有属性，它表示目标设备的密度等级，做用是决定css中的1px表明多少物理像素

特别说明的是，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。

由于这个属性只有安卓支持，而且安卓已经决定要废弃<strike>target-densitydpi</strike>  这个属性了，因此这个属性咱们要避免进行使用  。

8.3 把当前的viewport宽度设置为 ideal viewport 的宽度

要获得ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。由于meta viewport中的width能控制layout viewport的宽度，因此咱们只须要把width设为width-device这个特殊的值就好了。

<meta name="viewport" content="width=device-width">

下图是这句代码在各大移动端浏览器上的测试结果：

能够看到经过width=device-width，全部浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iphone和ipad上，不管是竖屏仍是横屏，宽度都是竖屏时ideal viewport的宽度。

这样的写法看起来谁都会作，没吃过猪肉，谁还没见过猪跑啊~，确实，咱们在开发移动设备上的网页时，无论你明不明白什么是viewport，可能你只须要这么一句代码就够了。

但是你确定不知道

<meta name="viewport" content="initial-scale=1">

这句代码也能达到和前一句代码同样的效果，也能够把当前的的viewport变为 ideal viewport。

呵呵，傻眼了吧，由于从理论上来说，这句代码的做用只是不对当前的页面进行缩放，也就是页面本该是多大就是多大。那为何会有 width=device-width 的效果呢？

要想清楚这件事情，首先你得弄明白这个缩放是相对于什么来缩放的，由于这里的缩放值是1，也就是没缩放，但却达到了 ideal viewport 的效果，因此，那答案就只有一个了，缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候，不就获得了 ideal viewport吗？事实证实，的确是这样的。下图是各大移动端的浏览器当设置了<meta name="viewport" content="initial-scale=1"> 后是否能把当前的viewport 宽度变成 ideal viewport 的宽度的测试结果。

测试结果代表 initial-scale=1 也能把当前的 viewport 宽度变成 ideal viewport 的宽度，但此次轮到了windows phone 上的IE 不管是竖屏仍是横屏都把宽度设为竖屏时 ideal viewport 的宽度。但这点小瑕疵已经可有可无了。

但若是 width 和 initial-scale=1 同时出现，而且还出现了冲突呢？好比：

<meta name="viewport" content="width=400, initial-scale=1">

width=400 表示把当前 viewport 的宽度设为400px，initial-scale=1 则表示把当前 viewport 的宽度设为ideal viewport的宽度，那么浏览器到底该服从哪一个命令呢？是书写顺序在后面的那个吗？不是。当遇到这种状况时，浏览器会取它们两个中较大的那个值。例如，当width=400，ideal viewport 的宽度为320时，取的是400；当width=400， ideal viewport的宽度为480时，取的是ideal viewport的宽度。（ps:在uc9浏览器中，当initial-scale=1时，不管width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）

最后，总结一下，要把当前的viewport宽度设为ideal viewport的宽度，既能够设置 width=device-width，也能够设置 initial-scale=1，但这二者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，统统以竖屏的ideal viewport宽度为准。因此，最完美的写法应该是，二者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：

<meta name="viewport" content="width=device-width, initial-scale=1">

8.4 关于meta viewport的更多知识

8.4.1 关于缩放以及initial-scale的默认值

首先咱们先来讨论一下缩放的问题，前面已经提到过，缩放是相对于 ideal viewport 缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。例如在iphone中，ideal viewport 的宽度是320px，若是咱们设置 initial-scale=2 ，此时 viewport 的宽度会变为只有160px了，这也好理解，放大了一倍嘛，就是原来1px的东西变成2px了，可是1px变为2px并非把原来的320px变为640px了，而是在实际宽度不变的状况下，1px变得跟原来的2px的长度同样了，因此放大2倍后原来须要320px才能填满的宽度如今只须要160px就作到了。所以，咱们能够得出一个公式：

visual viewport宽度 = ideal viewport宽度 / 当前缩放值

当前缩放值 = ideal viewport宽度 / visual viewport宽度

ps: visual viewport 的宽度指的是浏览器可视区域的宽度。

大多数浏览器都符合这个理论，可是安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才是表现正常的，也就至关于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，不管你给他设置什么，initial-scale表现出来的效果永远是1。

好了，如今再来讲下 initial-scale 的默认值问题，就是不写这个属性的时候，它的默认值会是多少呢？很显然不会是1，由于当 initial-scale = 1 时，当前的 layout viewport 宽度会被设为 ideal viewport 的宽度，但前面说了，各浏览器默认的 layout viewport 宽度通常都是980啊，1024啊，800啊等等这些个值，没有一开始就是 ideal viewport 的宽度的，因此 initial-scale 的默认值确定不是1。安卓设备上的 initial-scale 默认值好像没有方法可以获得，或者就是干脆它就没有默认值，必定要你显示的写出来这个东西才会起做用，咱们无论它了，这里咱们重点说一下iphone和ipad上的 initial-scale 默认值。

根据测试，咱们能够在iphone和ipad上获得一个结论，就是不管你给 layout viewpor 设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算 initial-scale 这个值，以保证当前 layout viewport 的宽度在缩放后就是浏览器可视区域的宽度，也就是说不会出现横向滚动条。好比说，在iphone上，咱们不设置任何的 viewport meta 标签，此时 layout viewport 的宽度为980px，但咱们能够看到浏览器并无出现横向滚动条，浏览器默认的把页面缩小了。根据上面的公式，当前缩放值 = ideal viewport宽度 / visual viewport宽度，咱们能够得出：

当前缩放值 = 320 / 980

也就是当前的 initial-scale 默认值应该是 0.33这样子。当你指定了 initial-scale 的值后，这个默认值就不起做用了。

总之记住这个结论就好了：在iphone和ipad上，不管你给viewport设的宽的是多少，若是没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

8.4.2 动态改变meta viewport标签

第一种方法

可使用 document.write 来动态输出 meta viewport 标签，例如：

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

第二种方法

经过 setAttribute 来改变

<meta id="testViewport" name="viewport" content="width = 380"> <script> var mvp = document.getElementById('testViewport'); mvp.setAttribute('content','width=480'); </script>

安卓2.3自带浏览器上的一个 bug

<meta name="viewport" content="width=device-width"> <script type="text/javascript"> alert(document.documentElement.clientWidth); //弹出600，正常状况应该弹出320 </script> <meta name="viewport" content="width=600"> <script type="text/javascript"> alert(document.documentElement.clientWidth); //弹出320，正常状况应该弹出600 </script>

测试的手机 ideal viewport 宽度为320px，第一次弹出的值是600,但这个值应该是第行meta标签的结果啊，而后第二次弹出的值是320，这才是第一行meta标签所达到的效果啊，因此在安卓2.3(或许是全部2.x版本中)的自带浏览器中，对 meta viewport 标签进行覆盖或更改，会出现让人很是迷糊的结果。

最后咱们来看一个栗子来加深上面概念的印象：

一只笔的像素以下：

这只笔在屏幕c,d,e下的显示效果以下：

看到同一张图片在各屏幕显示大小不一。
咱们但愿不一样屏幕显示图片的大小要一致。
咱们要计算图片缩放比例。
计算公式：
(图片逻辑像素大小px1) / (图片缩放后实际像素大小px2) = (设备像素dp) / (设备独立像素dips)
px2 = px1 * (dp / dips)
px2 = px1 * dpr
此时，这只笔在屏幕c,d,e下的显示效果以下：

经过上面的咱们能够看到，不一样的 DPR (设备像素比)要想显示大小同样，必须准备三张不一样分辨率的图片，那么，我想一张图片就在三种不一样的屏幕下显示同样的大小，能作到吗？固然能作到，这就须要缩放了，要本身计算缩放多麻烦，那有没有一种简单的方式呢？固然有，那就是你在熟悉不过的px,你会发现设置图片宽度为50px之后，在各个移动终端的大小看起来都同样，这是什么缘由呢。

按照 CSS 规范的定义，CSS 中的 px 是一个相对长度，它相对的，是 viewing device 的分辨率。这个viewing device，一般就是电脑显示器。典型的电脑显示器的分辨率是96DPI，也就是1像素为1/96英寸（实际上，假设咱们的显示器分辨率都与物理分辨率一致，而液晶点距实际上是0.25mm到0.29mm之间，因此不太多是正好1/96英寸，而只是接近）。

通常来讲，px 就是对应设备的物理像素，然而若是输出设备的解析度与电脑显示器大不相同，输出效果就会有问题。例如打印机输出到纸张上，其解析度比电脑屏幕要高许多，若是不缩放，直接使用设备的物理像素，那电脑上的照片由 600DPI 的打印机打出来就比用显示器看小了约6倍。

因此 CSS 规定，在这种状况下，浏览器应该对像素值进行缩放调节，以保持阅读体验的大致一致。也就是要保持必定像素的长度在不一样设备输出上看上去的大小老是差很少。

怎样确保这一点呢？直接按照设备物理像素的大小进行换算固然是一个方式，可是CSS考虑得更多，它建议，转换应按照“参考像素”（reference pixel）来进行。

眼睛看到的大小，取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西，与1米远处的10厘米见方的东西，看上去的大小差很少是同样的，所谓一叶障目不见泰山，讲的就是这个常识。

所以CSS规范使用视角来定义“参考像素”，1参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。

请注意这个差异——CSS规范定义的参考像素并非1/96英寸，而是1/96英寸在一臂之遥的看起来的视角。一般认为常人臂长为28英寸，因此其视角能够计算出来是0.0213度。（即(1/96)in / (28in * 2 * PI / 360deg) ）

咱们在使用不一样设备输出时，眼睛与设备输出的典型距离是不一样的。好比电脑显示器，一般是一臂之距，而看书和纸张时（对应于打印机的设备输出），则一般会更近一些。看电视时则会更远，好比通常建议是电视机屏幕对角线的2.5到3倍长——若是你是个42'彩电，那就差很少是3米远。看电影的话……我就不知道多远了，您本身量吧。

所以，1参考像素：
对于电脑显示器是0.26mm（即1/96英寸）；
对于激光打印机是0.20mm（假设阅读距离一般为55cm，即21英寸）；

而换算时，对于300DPI的打印机（即每一个点是1/300英寸），1px一般会四舍五入到3dots，也就是0.25mm左右；而对于600DPI的打印机，则可能四舍五入到5dots，也就是0.21mm。

上图中，左边的屏幕（能够认为是电脑屏幕）的典型视觉距离是71厘米即28英寸，其1px对应了0.28mm；
而右边的屏幕（能够认为是你的42寸高清电视）的典型视觉距离是3.5米即120英寸，其1px对应1.3mm。42寸的1080p电视，分辨率是1920*1080，则其物理像素只有0.5mm左右，可见确实是高清哦。

综上，px 是一个相对单位，并且在特定设备上老是一个近似值（原则是尽可能接近参考像素）。

然而，若是你把绝对单位理解为对输出效果的绝对掌控，事情却截然不同。就网页输出的最主要对象——电脑屏幕来讲，px 可被视为一个基准单位——与桌面分辨率一致，若是是液晶屏，则几乎老是与液晶屏物理分辨率一致——也就是说网页设计者设定的1px，就是“最终看到这个网页的用户的显示器上的1个点距”！反却是那些绝对单位，其实一点也不绝对。

 

引用：https://github.com/jawil/blog/issues/21