挥别web移动端开发差别和经典坑

web移动端

电话号码识别差别

在 iOS Safari （其余浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话连接，好比：

• 7 位数字，形如：1234567
• 带括号及加号的数字，形如：(+86)123456789
• 双链接线的数字，形如：00-00-00111
• 11 位数字，形如：13800138000

关闭识别

<meta name="format-detection" content="telephone=no" />
复制代码

开启识别

<a href="tel:123456">123456</a>
复制代码

输入框内阴影差别

描述：在 iOS 上，输入框默认有内部阴影，没法使用 box-shadow 来清除 解决：

input,
textarea {
    /* 方法1: 去掉边框 */
    border: 0;

    /* 方法2: 边框色透明 */
    border-color: transparent;

    /* 方法3: 重置输入框默认外观 */
    -webkit-appearance: none;
    appearance: none;
}
复制代码

android系统中元素被点击时产生边框

描述：部分android系统点击一个连接，会出现一个边框或者半透明灰色遮罩, 不一样生产商定义出来额效果不同 解决：

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

iOS滑动不流畅

描述：ios 手机上下滑动页面会产生卡顿，手指离开页面，页面当即中止运动。总体表现就是滑动不流畅，没有滑动惯性。 解决： iOS 5.0 以及以后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。

• 在滚动容器上增长滚动 touch 方法

.wrapper {
  -webkit-overflow-scrolling: touch;
}
复制代码

• 设置overflow : 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。

body {
  overflow-y: hidden;
}
.wrapper {
  overflow-y: auto;
}
复制代码

MDN定义： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会当即中止。 touch: 使用具备回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会建立一个新的堆栈上下文。

移动端click屏幕产生200-300 ms的延迟,PC端无

问题描述：移动设备上的web网页是有300ms延迟的，每每会形成按钮点击延迟甚至是点击失效。 解决：

• fastclick能够解决在手机上点击事件的300ms延迟
• zepto的touch模块，tap事件也是为了解决在click的延迟问题

iOS上拉边界下拉出现空白，安卓无

描述：手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。安卓无此特性。

在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器天然会被拖动，剩下的部分会成空白。

解决：

document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false
  }
)
复制代码

IOS日期格式转换NAN问题

描述： iOS系统中JS转换字符串变日期对象的时候，字符串格式必须是/相隔，一般状况是-相隔，在微信小程序IOS环境中一样出现出现此问题

iOS系统对js中的new Date()方法有格式要求

let dt = new Date("2019-07-24 19:57") //错误写法
// dt会返回valid Date

let dt = new Date("2019/07/24 19:57")  //正确写法
复制代码

解决： 'yyyy-MM-dd'.replace(/-/g, '/') 进行字符串匹配转换

IOS键盘弹起挡住原来的视图

描述：ios就是当唤起键盘后，整个页面会被键盘压缩，也就是说页面的高度变小，而且全部的 fixed 所有变为了 absolute ,而 android 中唤起键盘是覆盖在页面上，不会压缩页面

能够经过监听移动端软键盘弹起 Element.scrollIntoViewIfNeeded（Boolean）方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 若是该元素已经在浏览器窗口的可见区域内，则不会发生滚动。

关于Element.scrollIntoView()的MDN连接 关于Element.scrollIntoViewIfNeeded()的MDN连接

window.addEventListener('resize', function() {
  if (
    document.activeElement.tagName === 'INPUT' ||
    document.activeElement.tagName === 'TEXTAREA'
  ) {
    window.setTimeout(function() {
      if ('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView(false)
      } else {
        document.activeElement.scrollIntoViewIfNeeded(false)
      }
    }, 0)
  }
})
复制代码

onkeyUp和onKeydown兼容差别

用 input 监听键盘 keyup、keydown事件，在安卓手机浏览器中没有问题，可是在 ios 手机浏览器中用输入法输入以后，并未马上相应 keyup、keydown 事件

非直接的文字输入(中文输入法)下，进行判断限制，仅在选词后触发input事件

描述：在使用oninput监控输入框内容变化时，咱们指望仅在value值变化时，才触发oninput事件，而在中文输入下，未选词时的按键也会触发oninput事件。

关键解决：composition event

• compositonstart: 在IME的文本复合系统打开时触发，表示要开始输入例如(输入法出现的那一刻)
• compositionupdate: 在向输入字段中插入新字符时触发（使用输入法输入的过程当中）
• compositionend: 在输入法编辑器的文本复合系统关闭时触发，表示返回正常键盘输入状态(选中文字，输入法消失的那一刻)

判断限制：

$('#input').on('compositionend', function(e) {
        var len = $(this).val().length;
        if (len > 16) {
            // 提示超过16字
        }
    });
复制代码

选词后触发input事件:

var typing = false;
$('#ipt').on('compositionstart',function(){
    typing = true;
})
$('#ipt').on('compositionend',function(){
    typing = false;
})
//oninput在oncompositionend以前执行，需加定时器
$('#ipt').on('input',function(){
    setTimeout(function() {
        if(!typing) {
            //To do something...
        }
    },0);
})
复制代码

微信小程序

webp格式IOS不支持

描述：在小程序内部，IOS不支持webp格式，安卓支持； 时间：201908

setData设置KB数有误

描述：虽然官方文档说 setData 设置数据的时候不能超过1024KB，小程序在IOS下单次设置的数据不能超过1024kB ，设置会有问题，安卓没问题； 时间：201908

IOS系统微信版本兼容

描述： IOS8系统 只能 兼容最高微信版本 6.72 ，IOS系统9 能够兼容微信版本7.0.0 以上。

wx.onSocket断后再次发送连接IOS和安卓差别

描述：小程序 wx.onSocket 连接 在手动断网后，IOS会不停发送请求再连接onSocketOpen，安卓不会 ，解决方法，作一个定时器启动连接 时间：201908

部分安卓机器点击键盘发送相同内容

描述：部分安卓机，如oppo 快速点击键盘发送，会发出2条同样的内容，防抖与节流均不生效； 时间：201907

微信公众号

安卓在微信受权回调带#的URL跳转会出现空白

描述：安卓手机，在微信受权回调的函数中进行跳转至的URL不能带有#,但#号可放置在结尾。如： www.xuejiehome.com/#/home，跳转至微…

如：www.xuejiehome.com/#/home ，跳转至微信受权后，回调接口再次跳转至http://www.xuejiehome.com/#/home?arg=test，即在地址最后增长一个参数，微信中显示空白。

如：www.xuejiehome.com/#/home 跳转至微信受权后，回调接口再次跳转至http://www.xuejiehome.com/?arg=test#home 即在#home前增长一个参数，页面跳转正常。

经排查，缘由以下： 原来是缓存致使的，因其#号后的参数等都被忽略，那么#之前的URL在受权前和受权后一致，其再也不发送网页请求去从新获取而是直接读取缓存。

解决方法： 刷新须要跳转到的URL，可以使用PHP的Header跳转，默认header是不刷新的。 header("Refresh: 0; url={$go}"); 或者还能够输出js脚本跳转：

echo "<script>window.location.href='{$go}'</script>";
复制代码

累积中,上文存在错误状况请指正

参考：

总结移动端H5开发经常使用技巧（干货满满哦！）