黑马程序员技术交流社区

标题: [上海校区]一些移动端的兼容性问题及其解决方案 [打印本页]

---

作者: 束玉杰    时间: 2020-3-5 15:32
标题: [上海校区]一些移动端的兼容性问题及其解决方案


1. IOS移动端click事件300ms的延迟响应

移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

解决方案：

·        fastclick可以解决在手机上点击事件的300ms延迟

·        zepto的touch模块，tap事件也是为了解决在click的延迟问题

·        触摸事件的响应顺序为 touchstart -->touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题

2. h5底部输入框被键盘遮挡问题

h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决

var oHeight = $(document).height(); //浏览器当前的高度   

  $(window).resize(function(){

       if($(document).height() < oHeight){

       $("#footer").css("position","static");

   }else{

        $("#footer").css("position","absolute");

    }

  });

3.不让Android 手机识别邮箱<meta content="email=no" name="format-detection" />4.禁止 iOS 识别长串数字为电话
<meta content="telephone=no" name="format-detection" />
5.禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none
6.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格

可以通过正则去掉      this.value = this.value.replace(/\u2006/g, '');

7.禁止ios和android用户选中文字
-webkit-user-select:none
8.在ios和andriod中,audio元素和video元素在无法自动播放

应对方案：触屏即播

$('html').one('touchstart',function(){

   audio.play()

})

14  CSS动画页面闪白,动画卡顿

解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速

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

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

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

         transform: translate3d(0, 0, 0);

15.fixed定位缺陷

·        ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位

·        android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位

·        ios4下不支持position:fixed

·        解决方案： 可用iScroll插件解决这个问题

16.阻止旋转屏幕时自动调整字体大小html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}17.Input 的placeholder会出现文本位置偏上的情况

input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal

18.系统字体放大,导致rem布局错乱？

    设置根字体100px，但在这些手机上都是比100px大，因为这些手机系统设置的字体大小，比较的大，这时候，可以让安卓的小伙伴们，在每个webview配置webview.getSettings().setTextZoom(100)就可以了，其实就是禁止缩放。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2