背景
由于自己太久没开发移动端的页面，个人觉得移动端开发相比较PC端开发最大的不同，在于需要去适配各种尺寸的手机屏幕，尤其还有1px的问题。
因此需要再次收集一下，除了自己认知(rem适配)以外，是否还有移动端适配的方案吗？
问题
移动端存在几类问题，如下所列：
- 1px显示过粗问题
- 手机屏幕出现刘海屏、滴水屏等，如何适配
- 如何在不同屏幕，显示正确高清图片
- meta 的 viewport 值 能否用来适配
- rem，vw，vh计算单位的区别
- ...
概念
像素
像素是计算机屏幕上所能显示的最小单位。用来表示图像的单位。
按照我个人理解，把屏幕比做一张白纸，然后像素就是一个点，接着同一水平线上的点形成一条线，水平线和垂直线同时就形成一个画面。
然后对于我们前端开发而言，像素又需要分成几类：
1.设备独立像素, 俗称DIP，你可以理解成我们平时用css像素 又等于 逻辑像素，简单说就是同一个尺寸的屏幕，设备独立像素是一样的，从而减少误解
2.物理像素，其实就是我们真实肉眼可见的像素，物理像素 = 分辨率
3.设备像素比， DPRdevicePixelRatio = 设备像素 / 设备独立像素，当物理像素和设备独立像素不一样的时候，这个时候就需要一个标准来做适配，利用DPR我们能将同样的画面适应不同的屏幕
4.每英寸像素ppi （pixel per inch），表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像
分辨率
分辨率指屏幕上像素的数目，一般用水平垂直，比如：屏幕分辨率为 800 600， 水平有800个像素点，垂直有600个像素
所以平时我们将2k、4k屏幕，通常指的是水平方向的存放像素超过2000或4000个。
视口（viewport）
视口代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等——即指你正在浏览的文档的那一部分。 视口一般是指用户访问页面时，当前的可视区域范围。通过滚动条滑动，视口可以显示页面的其他部分。 通过 document.documentElement.clientWidth 或 window.innerWidth 可以获取视口宽度。
简单的说，视口就是浏览器肉眼可见的区域，是随时可变化，视口是一个概念，它又可以根据
不同情况分为以下几种：
- 布局视口，对于开发来说的一种视口概念，在移动端可以通过
调整从而将打屏显示的内容完整缩小适配到移动端小屏 - 视觉视口，是一种针对移动端屏幕提出来的概念，具体是指的屏幕的可见区域，当键盘弹起、浏览器工具栏隐藏等，视觉视口都会随之变化，而布局视口不会
布局视口（layout viewport）
innerHeight 和 innerWidth 所组成的区域通常被认为是布局视口（layout viewport）。浏览器的框架不被认为是视口的一部分。
在PC端的时候， 视口=布局视口=视觉视口。
在移动端的时候，布局视口 = 内容宽度，可以通过调整，下面举几个例子(移动端为375*667)：
， 布局视口=window.innerWidth=980, 布局视口=window.innerWidth=375
视觉视口（visual viewport）
视觉视口指当前浏览器中可见的部分，并且可以变化。当使用双指缩放，或键盘在手机上弹出的时候，或者之前隐藏的地址栏变得可见的时候，视觉视口缩小了，但是布局视口却保持不变。
相比较布局视口概念，视觉视口是由苹果 乔布斯提出，为了更好的在移动端展示web网页，视觉视口=屏幕的可见区域，下面通过几个例子去认知(移动端为375*667)：
，视觉视口=window.screen.width=375，视觉视口=window.screen.width=375
viewport设置项
viewport的设置主要是在移动端配置视口大小，从width宽度，initial-scale缩放等设置属性，具体如下：
- width：控制 viewport 的大小，可以给它指定一个值(正整数)，或者是一个特殊的值(如：device-width 设备独立像素宽度，单位缩放为 1 时)；
- initial-scale：初始缩放比例，即当页面第一次加载时的缩放比例，为一个数字(可以带小数)；
- maximum-scale：允许用户缩放到的最大比例，为一个数字(可以带小数)；
- minimum-scale：允许用户缩放到的最小比例，为一个数字(可以带小数)；
- user-scalable：是否允许用户手动缩放，值为 "no"(不允许) 或 "yes"(允许)；
- height：与 width 相对应(很少使用)。
注意项
- iframe的视口等于是其内部高度和宽度的大小。
- SVG的视口即 SVG 图片的可视区域。
