移动端问题总结分享

1. 穿透问题。

问题：IOS 和 Android 手机上都会出现；

          当A 层盖在B层上时，A层绑定touchend 或 touchstart 事件让自己关闭，B层是个a 标签元素，那么用户点击A层的时候，A层关闭 并且页面会根据B层的 a 标签的href进行跳转。

          神奇的是，给B层加上 e.preventDefault() 还是阻止不了页面的跳转，也就是根本没有触发 B 层上的绑定事件，但还是跳转了。

解决：首先点击元素触发事件的先后顺序：touchstart, touchend, mousedown, mouseup, click

不用 touchend 事件, 用click 或 mousedown 或 mouseup事件，但这在手机端可能不太好

         给A 整个层或者某个元素 绑定touchstart 并且e.preventDefault() , 如果这个元素是 a , 那么必须用 location.href 去跳转；如果是 input 框，则不能用 e.preventDefault()，否则你不能输入任何字符，所以得加个判断。

1. Animate 的 stop 问题

问题：手机端由于用 CSS3 做动画，所以 zepto.js 没有 stop 方法。

解决：我已自定义扩展了一个方法，猛击 搜索$.fn.stop， 目前支持动画 2d transform 和top 和 left 的停止，不支持@keyframe 和 3D。

1. 声音问题

问题：对于IOS 的手机，如果想在游戏的结尾出结果的声音; 安卓手机有的时候声音会进入死循环播放。

解决：当用户点击游戏“开始按钮”，调用结果声音的play()然后pause()；调用下声音的 load()方法再停止 或者 load()方法再播放。

1. rem

问题：为了能像PC端一样随心所欲的切 640宽度下的页面

解决：先约定好：对于 640px 下的 html 根元素定义 font-size: 100px, 然后在页面的 head 加入以下代码,  那么当一个元素是 10px 时，你只要写成 0.1rem，方便快捷。

var fitPage = function(){

           var w = $(‘html‘).width();

           w = w > 640 ? 640: w;

           var newW = w/640 * 100;

           $(‘html‘).css({

             fontSize: newW

           });

}

fitPage();

5: 判断是否是手持设备

   本来偶是写 ‘ontouchstart’ in window

   参考了下 jQuery mobile，改成‘ontouchend‘ in document

6: 元素的上下居中

   之前是用 table 去居中的，后面发现其实用 flex-box 应该会更好，后面会尝试使用。

7：还在为 禁用按钮而烦恼吗？还在为发送短信验证码 屏蔽按钮而写一堆js吗

只需2个属性，一切js都是浮云~~~~看例子吧：

<a href=”” style=”pointer-events:none;” disabled = “disabled”></a> （pointer-events:none;主要解决部分ios 不兼容 disabled ）

是的，就这么简单！！！  不单单按钮，各种妙用，自己去体验吧~