移动端问题总结分享

  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 )

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

原文地址:https://www.cnblogs.com/czzblog/p/4221897.html