H5移动端适配——解决移动端必须手动调整以适配的问题
问题：
H5网页在移动端浏览器上打开时过大，需要双击或者手动调整才能适配屏幕。效果如下：
问题的根本原因是：写网页的时候尺寸设置过大(･ัω･ั)
直接按照UI给的设计图上的尺寸设置后，整个页面变成了它本应该大小的2倍大。原因在于一般UI给的单位是物理像素，而css中的像素是一个抽象值，css中的1px和设备的1物理像素有着一定的对应关系。
参考：http://www.mamicode.com/info-detail-2439333.html
因此我们只要在为图片等元素设置尺寸时设置为设计图给定尺寸的一半就好了。
注意：不要给html和body设置固定的大小，否则可能导致在左右晃动，不能占满整个屏幕等问题。
然后在html文件的<head>标签中加入：
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
标签中的viewport表示可视区范围，该标签规定了可视区范围的宽度为设备宽度，初始尺寸为1。也可以继续设置最大尺寸和最小尺寸。
完成这两步就可以不用手动调整就让网页适配移动端了。
