移动设备的视口

屏幕尺寸：

设备的屏幕尺寸是指屏幕的对角线长度

iPhone7 是4.7寸  iPhone7p是5.5寸
1英寸 = 2.54厘米
5.5in =5.5*2.54 =13.97cm

屏幕分辨率：

屏幕分辨率是指：屏幕的像素点
pc常见分辨率[1024*768,1440*900,...]
移动常见分辨率[2160*1080,1920*1080,1334*750,1136*640,..]
在说分辨率的时候我们常常会把大的值说在前面，所以在PC端屏幕宽度比高度的值要大一点，第一个值一般是指的宽度第二个值为高度。移动端正好相反，第一个值是宽度。

PPI（Pixels Per Inch）| DPI（Dots Per Inch）：

两个值是屏幕每英寸的像素数量，即像素密度。

一般的计算公式： DPI= 对角线分辨率 / 屏幕尺寸

屏幕对角线的分辨率也就是屏幕对角线上的像素点数，可以根据已知的横纵分辨率通过勾股定理计算得。
勾股定理算出对角线的分辨率（例如1920*1080的分辨率）
dpi=1080平方+1920平方的平方根 约等于2203
对角线分辨率除以屏幕尺寸：2203/5 约等于440dpi (每寸有440个像素)
对角线分辨率除以屏幕尺寸：2203/5≈440dpi

设备像素：

设备像素是物理概念，指的是设备中使用的物理像素,也就是屏幕中的发光的点数(屏幕由很多个发光点组成，每个发光点可以显示不同的颜色，这些发光的点组成了屏幕)
比如iPhone 5的分辨率640 x 1136px。横向有640个发光的点，纵向有1136个发光的点。所以我们说iPhone5 的设备水平像素是640像素，指的是640个发光点。

设备独立像素（DIP）：

设备独立像素（DIP，device-independent pixel，density-independent pixel），设备独立像素是指：独立于设备的用于逻辑上衡量像素的单位。在移动Web开发中就是指的CSS的逻辑像素。

设备像素比(devicePixelRatio)

设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素（也称物理像素）和CSS像素的比值(设备独立像素)。

DPR = 设备像素 / CSS像素

仅仅计算横向或者纵向。比如：iphone5为例：水平物理像素640 页面缩放100%时，
横向320px，则dpr = 640 / 320 = 2

DPR也有对应的javascript属性window.devicePixelRatio （ie11+,edge,chrome49+, Safari9.1+）

DPR不一定都是整数，尤其是android设备十分的碎片化！

总结：

物理像素（dpr1）又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置
自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果

css像素（dpr2） （四个物理像素来显示一个css像素，屏幕显的更加细腻）也叫设备独立像素（密度无关像素）
屏幕密度 是指一个设备表面存在的像素数量，通常以每英寸有多少像素来计算（PPI）（对角线上每英寸多少像素）

dpr（设备像素比） =物理像素 / 设备独立像素  （ip6  750物理像素/375css像素=dpr2）
在js中可以通过 window.devicePixelRatio获取当前设备的dpr。
而css中可以通富-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和
-webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备做一些一个是设配
（这里只针对webkit内核的浏览器和webview），dip或dp与屏幕的密度有关。dip可以用来辅助
区分视网膜设备还是非视网膜设备

分辨率的换算
iPhone6 的设备宽度和高度为 375pt *667pt，可以理解为设备的独立像素（css像素）
而dpr为2（4个物理像素组成），根据上面的公式，我们可以得出其物理像素为 750 * 1334
举例：某元素的css样式
width：2px；
height:2px;
在不同的屏幕上，css像素索呈现的物理尺寸是一致的，而不同的是css像素所对应的物理像素是不一致的
在普通屏幕下1个css像素对应1个物理像素，而在retina屏幕下（视网膜屏幕），1个css像素对应的却是4个物理像素

理想视口(ideal viewport)

第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；

第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，
理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，
其他元素像图片什么的也是这个道理。

理想视口的宽度一般可以通过以下公式计算：

理想视口的宽度 = 设备像素 / dpr
也就是当布局视口的宽度 等于 设备独立像素的宽度时就是理想视口。
简单的指定的方法：

<!--这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致-->
 
<meta name="viewport" content="width=device-width">

或者
 
<meta name="viewport" content="initial-scale=1">
 
meta标签控制布局视口的缩放
 <meta name="viewport" content="initial-scale=1">
为什么我们指定了meta标签的viewport缩放比例1也可以实现理想视口呢？
这个值是确定整体网页缩放的比例。

缩放比 = 理想视口的宽度 / 视觉视口的宽度

也就是说当视觉视口的宽度 和 理想视口的宽度相等时，则就是1。
因为手机端的浏览器会自动设置布局视口的宽度为视觉视口的宽度，所以此时：设备的布局视口==视觉视口==理想视口。
视觉视口：当页面手动放大的时候，用户可以看到的网页内容减少，视觉视口的尺寸变小。反之，同理。
默认的缩放（initial-scale）值设置后，浏览器会根据理想视口计算出视觉视口，并设置布局视口==视觉视口。
但是如果width和initial-scale都设置的时候，浏览器会取两个值较大的，所以可以通过width设置一个最小的布局视口宽度。
 viewport的其他设置
maximum-scale
在移动端，你可能会考虑用户浏览不便，然后给予用户放大页面的权利，但同时又希望是在一定范围内的放大，这时就可以使用maximum-scale来进行约束。
maximum-scale用于指定用户能够放大的比例。
举个例子来讲：
<meta name="viewport" content="initial-scale=1,maximum-scale=5" />

假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的5倍。

minimum-scale
类似maximum-scale的描述，不过minimum-scale是用来指定页面缩小比例的。

通常情况下，为了有更好地体验，不会定义该属性的值比1更小，因为那样页面将变得难以阅读。

user-scalable
如果你不想页面被放大或者缩小，通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。

该属性的默认值为yes，即可被缩放（如果使用默认值，该属性可以不定义）；当然，如果你的应用不打算让用户拥有缩放权限，可以将该值设置为no。

使用方法如下：
<meta name="viewport" content="user-scalable=no" />