移动 Web 开发问题和优化小结

1. Meta标签

这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户通过点击或者缩放等操作对屏幕放大浏览。

这个在ios10以上的版本已经失效了，即使加了下面的meta，用户双击，缩放还是可以缩放页面。

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

ios10以上版本解决方法：监听事件来阻止

<!--解决方法：监听事件来阻止-->
    window.onload=function () {  
        document.addEventListener('touchstart',function (event) {  
            if(event.touches.length>1){  
                event.preventDefault();  
            }  
        })  
        var lastTouchEnd=0;  
        document.addEventListener('touchend',function (event) {  
            var now=(new Date()).getTime();  
            if(now-lastTouchEnd<=300){  
                event.preventDefault();  
            }  
            lastTouchEnd=now;  
        },false)  
    }

禁止ios上自动识别电话

<meta content="telephone=no"name="format-detection"/>

禁止android上自动识别邮箱

<meta content="email=no" name="format-detection" />

针对ios上的safari上地址栏和顶端样式条的（

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 听说在ios7以上版本就没效果了 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent 但是我都是用black-->

2. 打电话发短信

<a href="tel:020-11811922">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>

3. css3过渡动画开启硬件加速

这个用了，手机的耗电量也会增加。

.translate3d{
       -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
 }

1.在手机上（其实PC也是一样）。CSS3动画或者过渡尽量使用transform和opacity来实现动画，不要使用left和top。
2.动画和过渡能用css3解决的，就不要使用js。如果是复杂的动画可以使用css3+js（或者html5+css3+js）配合开发，效果只有想不到，没有做不到。

4. 移动端click屏幕产生200-300 ms的延迟响应

click事件因为要等待确认是否是双击事件，会有300ms的延迟（两次点击事件间隔小于300ms就认为是双击），体验并不好。
现在的解决方案:
- 第一个就是采用touchstart或者touchend代替click。
- 或者封装tap事件来代替click 事件，所谓的tap事件由touchstart事件 + touchmove（判断是否是滑动事件）+touchend事件封装组成。

关于touch和鼠标事件的延迟说明

5. 图片优化

5-1.base64编码图片替换url图片

对于一些小图标（我这做法是把8K以下的图标都转换成base64）之类的，可以将图片用base64，来减少请求的发送。

5-2.图片压缩

能不使用就不适用，图标可是使用base64编码，字体图标代替，SVG等来代替，使用就要选择最合适的格式，合适的尺寸，然后压缩
过度压缩图片大小影响图片显示效果，可能会使得图片变得模糊，一般来说，品质在60左右就差不多了！

5-3.图片懒加载

首屏加载的快慢，直接影响用户的体验，建议将非首屏的图片资源放到用户需要时才加载。这样可以大大优化首屏加载，减少首屏加载所需要的时间！

5-4.img还是background

img：html中的标签img是网页结构的一部分会在加载结构的过程中和其他标签一起加载。
background：以css背景图存在的图片background会等到结构加载完成（网页的内容全部显示以后）才开始加载
网页会先加载标签img的内容，再加载背景图片background引用的图片。引入一张图片，那么在这个图片加载完成之前，img后的内容不会显示。而用background来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，网页内容能正常浏览，但是看不到背景图片。

6. 快速回弹滚动

在ios上，如果存在局部滚动，就要加这个属性了！如果不加，滚动会很慢，看起来也会有一卡一卡的感觉。

-webkit-overflow-scrolling: touch;

但是，加上了这个，在ios上会产生bug: 页面滚动一定的距离后，点击了显示弹窗，再关闭的话，就会发现，弹窗的一部分还“留在页面上”。

<html>
    <!--外部大div-->
    <div class='fb-box'>
        <!--弹窗div-->
        <div class='dialog-img' style='height:100%;-webkit-overflow-scrolling:touch;position:relative;'></div>
    </div>
</html>

1. 解决方案1：把弹窗的div和.fb-box以兄弟节点的方式布局，在外层再弄一个div包住

<html>
    <div class='box'>
        <div class='fb-box'></div>
        <div class='dialog-img' style='height:100%;-webkit-overflow-scrolling:touch;position:relative;'></div>
    </div>
</html>

2. 解决方案2：.fb-box去掉position:ralative;。让弹窗的div参考body定位！

7. 谨慎使用fixed

ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位，会发生元素错位（滚动一下又恢复），有时候会出现闪屏的效果。
所以在手机上，不建议用fixed定位，使用absolute代替！

8. 消除transition闪屏

这个问题，我近段时间开发，貌似不加上这个代码也没什么影响，但是以前就是要求加，就加上了，现在没加上，也没反馈有什么问题！

.no-flash { 
        -webkit-transform-style: preserve-3d; 
        -webkit-backface-visibility: hidden; 
        -webkit-perspective: 1000; 
}

9. ios系统中去掉元素被触摸时产生的半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

10. ios中去掉默认input默认样式

input,button,textarea{-webkit-appearance: none;}

11. 左右滑动，避免页面跟着滑动

两种方法，个人推崇第一种，google也建议第一种
1. body加上css touch-action: none;
2. touchstart的时候event.preventDefault();阻止默认事件