移动端适配
了解屏幕和页面
设备的尺寸
设备的尺寸通常用（英寸）来表示，它是指设备上对角线的长度。
1英寸 = 2.54 厘米
像素
一个图像，都是由很多的像素组成的。像素是组成图像的最小单位。
设备像素和设备分辨率
设备像素也叫物理像素，就是屏幕上的真实像素点。设备像素是屏幕出厂就已经固定的，无法修改。
设备分辨率就是这个屏幕上真实像素点的数量。
比如，在购买手机时，上面显示的屏幕分辨率就是设备分辨率。下面是一款VIVO手机的设备信息：
通常说的 xP 是指纵向像素大小为 x 的屏幕。如1920*1080 属于 1080P
通常说的 xK 是指横向像素大小为 x *1024的屏幕。如 2048*1152 就属于2K。
DPI和PPI：衡量标准
随着屏幕的升级换代，现在同样的屏幕尺寸，可以具有更高的设备分辨率了。对于相同的尺寸，如果显示的像素越多，那么最后沾水处理的屏幕就越清晰。下面两种单位，就可以衡量屏幕的清晰度了：
- DPI: 每英寸的点数，这个点数可以是屏幕像素点、图片像素点也可以是打印机的墨点
- PPI: 每英寸的像素数
对于屏幕来说，DPI和PPI是等价的。
设备独立像素
对于同样尺寸的屏幕，设备分辨率越高，展示的像素就越多了。
但是网页中的文字，形状等通常都是以 px 为单位的，这意味着对于同样大小的屏幕，相同px单位的文字，分辨率越高，显示的文字就越小。
很明显，这不利于用户体验。
为了解决这种问题，就有了设备独立像素的概念：
设备独立像素（device independent pixels）是操作系统定义的一种像素单位，应用程序将设备独立像素告诉操作系统，操作系统再将设备独立像素转化为设备像素，从而控制屏幕上真正的物理像素点。
iPhone4的发布会上首次提出了Retina Display(视网膜屏幕)是概念，即使用一个设备独立像素来表示多个个物理像素。这样就可以让页面显示的更加细致清晰。（如曲线）
CSS像素
当网页不进行缩放的时候，我们在CSS等位置中使用的 px 单位都是指设备独立像素。
但如果网页缩放了，那么一个CSS像素就可能会跨越更多或更少的设备独立像素。
其中CSS像素和设备独立像素的比值就是页面的缩放比例。
设备像素比
设备像素比(device pixel ratio,dpr)，是指物理像素和设备独立像素的比值。
但是在CSS和JS中，设备像素比是指CSS像素和物理像素的比值。
在JS中，我们可以通过下面的属性来获取设备像素比：
1 | window.devicePixelRatio |
在CSS中，可以通过媒体查询结合 min-device-pixel-ratio 来设置不同的像素比。
视口(viewport)
视口就是浏览器中，网页显示的区域(不包含浏览器的UI)。
布局视口
布局视口是指页面根元素的宽高。也就说，布局视口可以通过下面的方法获取：
1 | document.documentElement.clientWidth |
这里只讨论宽度
默认情况下，PC端的布局视口就是这个页面可以展示的CSS像素数。如果没有缩放，那么也等于设备独立像素。
对于移动端，为了保证PC端的网页能够在手机端上展示，移动端的布局视口通常被设置一个固定的值（谷歌浏览器是980px）。当用户缩放页面时，布局视口不会发生变化，而是显示滚动条。
视觉视口
视觉视口就是用户可以看到的部分,可以通过下面的方法获取：
1 | window.innerWidth |
视觉视口默认等于当前浏览器的窗口大小（含滚动条）。
在PC端中，如果用户缩放了页面，那么视觉视口就等于默认情况下的布局视口。
在移动端中，如果用户缩放了页面，那么视觉视口就会发生变化（默认情况下的布局视口/缩放比例）。
理想视口
理想视口就是网站页面在移动端展示的理想大小，其值刚好是设备独立像素。获取方式：
1 | screen.innerWidth |
设置默认布局视口为理想视口
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
参考
博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议
