移动端开发踩坑经验总结

前言

记录移动端开发踩坑，提升性能等经验，包含CSS3动画性能问题，常见适配问题等

CSS

CSS动画

• 尽可能的让动画元素不在文档流中，以减少重排

position: fixed;
position: absolute;

• 尽可能多的利用硬件能力，如使用3D变形来开启GPU加速

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

• CSS动画闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
 
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

尽可能少的使用box-shadows与gradients
box-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们。

消除 transition闪屏

-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/

-webkit-backface-visibility: hidden;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

javascript

高频触发事件 采用事件节流 或加以控制

• 而如果中间的code需要处理的东西多的话，FPS就会下降影响程序顺滑度，而如果改成这样

$('div').on('touchmove', function(){
  setTimeout(function(){
    //.….code
  },0);
});

移动端 HTML5 audio autoplay 失效问题

由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。

• 解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

document.addEventListener('touchstart', function () {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});

利用padding或margin得百分比特性做响应式元素

• padding 和 margin得 top 和 bottom值设置百分比参数，百分比是相对于宽度计算得距离，利用此特性有助于移动端定位元素位置。

添加分享到朋友圈缩略图

微信分享链接时，自动抓取缩略图方法： 需要一张300*300的图片, 并添加在 body下，微信会自动抓取这张图来作为缩略图显示，格式如下：

<div id="wx_pic" style="display:none;">
  <img src="assets/images/share.jpg">
</div>

ios问题

iOS Safari 委托在document或者body上的事件失效

Safari 对click事件定义只能冒泡到body下面的子节点，所以委托在document上得click事件不会被触发！
解决方法为body得子节点添加click事件既可以解决。

$("body").children().click(function () {});

iOS Safari 双击后事件失效bug

bug 出现在弹出层双击空白区域后，浏览器scroll下移一部分，页面点击事件失效。
解决方法：弹出层禁止touchstart；

关于iOS系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

• 可以通过正则去掉

this.value = this.value.replace(/\u2006/g, '');

关闭iOS键盘首字母自动大写

• 在iOS中，默认情况下键盘是开启首字母大写的功能的，如果关闭这个功能，可以这样：

<input type="text" autocapitalize="off">

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

• ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩

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

IOS 5+快速回弹滚动问题问题表现：

IOS5新特性-webkit-overflow-scrolling: touch可以启动快速回弹滚动（fast bounce-scroll）效果，但是它会阻止渲染直到滚动结束。
影响: 1.从不滚动状态到滚动状态（反之亦然），因为要先初始化滚动状态才开始渲染，虽然很短暂，但也是有delay的，所以出现闪屏
2.列表滚动过程中，需要等到滚动结束之后，后面的元素才会渲染出来

• 解决方法:
• 1.启动硬件加速，可以用-webkit-transform: translate3d(0,0,0)，这个hack可以解决大部分问题
• 2.用min-height，直接杜绝滚动状态改变，从而防止闪屏问题（已解决详情页闪屏问题）

兼容性

去掉Android中元素被点击时产生的边框

• android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
• -webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
  另外，有些机型去除不了，如小米2对于按钮类还有个办法，不使用a或者input标签，直接用div标签

a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0;)
    -webkit-user-modify:read-write-plaintext-only;
}

去除移动端输入框内阴影

• 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,
textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

小米内置浏览器 z-index 失效

小米内置浏览器z-index失效多数产生在具有css3动画，或者设置translate3d属性的场景下。
解决方法: 为想要提升的层级添加tanslate3d(0,0,0)后在设置z-index解决。

手机拍照和上传图片

<!-- 选择照片 -->
<input type="file" accept="image/*">
<!-- 选择视频 -->
<input type="file" accept="video/*">

webview中viewport固定宽度全屏显示方法

由于一些移动端游戏或互动形式 布局（元素）需要固定大小，又需要自适应屏幕，
可以通过设置视口宽度等于固定值让浏览器自动缩放页面的方法来实现。

<meta name="viewport" content="width=640,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=1,maximum-scale=1,user-scalable=1">

• 其中的width=640就是网页内容区的宽度，需要在不同手机上刚好全屏显示，target-densitydpi=device-dpi设置后，css中的1px就会等于物理像素中的1px。
• 补充：由于safari浏览器不支持 target-densitydpi = device-dpi，所以加入JS代码自动调整缩放比例，调整后的代码：

<meta name="viewport" id="WebViewport" content="width=640,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=no"> 
 
<script language="javascript"> 
  if(screen.width < 640) { 
    document.getElementById('WebViewport').setAttribute('content', 'width=640,initial-scale=' + screen.width / 640 + ',target-densitydpi=device-dpi,minimum-scale=0.1,maximum-scale=1,user-scalable=no'); 
  } 
</script>