H5移动端网页开发过程中遇到的各种跳坑指南

现在的H5前端开发者基本都要同时进行PC端页面和手机端页面的开发工作，就目前的状况来看，手机页面的兼容性要比PC端更为复杂，更加明显的就是在Android端，而且有些样式在PC端页面上可能显示的很正常，但是一旦到了手机页面，那就有可能是不可预料的“大坑”，下面是开发手机页面过程中总结的一些问题以及跳坑指南。

1. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?
   经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone的960640分辨率在网页里只显示了480320,这样devicePixelRatio＝2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用2x的背景图来代替img标签(一般情况都是用2倍),例如一个div的宽高是100100,背景图必须得200200,然后background-size:contain;,这样显示出来的图片就比较清晰了;代码如下:
   background:url(…/images/icon/all.png) no-repeat center center;
   -webkit-background-size:50px 50px;
   background-size: 50px 50px;
   display:inline-block;
   width:100%;
2. 防止手机中网页放大和缩小
   这点是手机站开发者都应该知道的,就是设置meta中的viewport;有些手机站有如下声明:

3. 如何设置Web应用以全屏模式运行 apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行，语法: 4. 移动端click事件延迟的问题 移动端的点击事件都会有300ms延迟,是因为浏览器在等待你是否执行双击,但此延迟导致用户体验不好,解决这个问题的方案如下： 1.尽量都使用touch事件来替换c