H5移动端适配方案

在讨论适配方案之前，先熟悉几个概念：

设备像素/物理像素：设备实际物理像素点，是显示设备中一个最微小的物理部件，每个像素可以根据操作系统设置自己的颜色和亮度。任何设备的物理像素的数量都是固定的。例如（iphone6 750 * 1337） （iphone6plus 1960 * 1080）。注意：设备像素不等于CSS像素

像素密度：屏幕上每英寸可以显示的像素点的数量，单位是PPI

屏幕分辨率：设备屏幕横纵向上的物理像素点数的乘积。

CSS像素：CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”，单位px

设备独立像素（PD/PID）：密度无关像素，表示用几个实际物理像素表示的一个虚拟像素，这个虚拟像素就叫设备独立像素，如（iphone6 375 * 667） （iphone6P 414 * 736） （iphoneX 375 * 812）。实际开发中常可以认为“ 设备独立像素=CSS像素 ”

设备像素比（dpr）：设备物理像素与设备独立像素的比例，可以在JS中获取window.devicePixelRatio。现在的智能手机dpr一般都大于1，例如iphone6/7/8的dpr=2

布局视口（layout viewport）：网页布局的基准窗口，PC浏览器上，布局视口就等于当前浏览器的窗口大小（不包括 borders 、 margins、滚动条）；移动端，布局视口被赋予一个默认值，大部分为 980px。document.documentElement.clientWidth/clientHeight获取布局视口的宽高。通过在页面中添加meta的viewport width值设置布局视口的尺寸，一般为device-width

视觉视口（visual viewport）：用户通过屏幕真实看到的区域，默认等于当前浏览器的窗口大小。通过window.innerWidth/innerHeight来获取视觉视口大小

理想视口（ideal viewport）：网站页面在移动端展示的理想大小，上面说到的375 * 667指的就是理想视口尺寸。当页面不进行缩放时，视觉视口=理想视口。

移动端适配解决的就是让布局视口和视觉视口无限接近于理想视口

HTML标签的viewport说明：

• width决定布局视口的宽度，device-width是理想视口的宽度，设置 width=device-wi