H5适配

一、为什么要适配

a) 为了适应各种移动端设备（手机），完美呈现应有的布局效果

b) 各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放

二、概念知识

1. 屏幕尺寸

• 指屏幕的对角线的长度，单位是英寸
• 1英寸=2.54厘米

2. 屏幕分辨率

• 在横纵向上的像素点数，单位是px，1px=1个像素点
• 例如iPhone 6的分辨率是1334x750像素。一般纵向像素 * 横向像素来表示一个手机的分辨率

3. 屏幕像素密度/ 像素密度/ 屏幕密度

• 屏幕上每英寸可以显示的像素点的数量，单位是ppi（pixels per inch的缩写）
• 屏幕像素密度与屏幕分辨率有关

4. 设备像素/ 物理像素

• iPhone 6的分辨率是1334x750像素，代表设备(屏幕)有1334x750个显示呈像的点，一个点（小方格）为一个物理像素
• 它是屏幕能显示的最小粒度
• 每个像素可以显示颜色和亮度
• 任何设备(屏幕)的物理像素的数量都在生产后都是固定的

5. CSS像素

• CSS像素是为web开发者根据设计图表示Web页面上内容大小的抽象的单位，主要使用在浏览器上
• 在一个标准的显示密度下（普通屏），一个CSS像素对应着一个设备像素

6. CSS像素与物理像素的关系

• div{ width:100px }，表示占据了100个像素
• 100个像素占据多少个物理像素，就取决于屏幕的特性（是否是高密度，即像素比）和用户的缩放行为
• 在iphone6 RetinaHD高清视网膜显示屏中，因为视网膜的像素密度是普通屏幕的两倍，所以这个div就占了200个设备像素，如果用户放大，它将占据更多的设备像素。如果是iphone6 plus，就会占300个像素

7. 设备独立像素

• 又叫密度无关像素，可以认为是计算机坐标系中的一个点，这个点代表一个可以由程序使用的虚拟像素（如CSS设置的像素），然后由相关设备系统转换为物理像素，去显示对应的大小
• 对于我们开发者来说，并不在意一个CSS像素到底跨越了多少个设备像素，因为CSS和JavaScript定义的像素本质上代表的都是CSS像素，而怎么显示对应的大小这种依赖于屏幕特性和用户缩放程度的复杂计算交给了浏览器

8. 位图像素

• 一个位图像素是栅格图像（png，jpg，gif等）最小的数据单元，至少1个位图像素对应1个物理像素，图片才能得到完美清晰的展示

9. 像素比

• 设备物理像素和设备独立像素的比例，表示以多个像素去显示1px的大小
• 设备像素比 (devicePixelRatio) = 物理像素 / 独立像素

10. 布局视口 （layout viewport）

• 在PC端上，布局视口等于浏览器窗口的宽度

• 在移动端上，布局视口一般是980px

  document.documentElement.clientWidth

11. 视觉视口 (visual viewport)

• 眼睛所看到的窗口

• visualviewport是当前显示在屏幕上的部分页面。用户会滚动页面来改变可见部分，或者缩放浏览器来改变visualviewport的尺寸

 innerWidth 	// 视觉视口，设置滚动条包括滚动条
 outerWidth	    // 包括浏览器的镶边区域
 screen.width	// 屏幕宽度

12. 适配问题

• 设计图一般是750px宽
• meta最初Apple的一个html扩展标签，但被许多浏览器复用，意义是设置layoutviewport的宽度
• 比可视区的窗口太窄，就显示不下，太大也不行，最好是统一能够适应各大移动端设备(手机)
• 不同的使用场景，所用的适配方案(适配配置用法)不一样，配置用法都是固定写法，简单好用