常见兼容问题处理

1.ios键盘唤起,键盘收起以后页面不归位解决

  • 现状:输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑
  • 原因:固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件
  • 解决方法:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <input @blur.prevent="blur()"/>
    <script>
    blur(){
    let u = navigator.userAgent;
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if(isIOS){
    setTimeout(() => {
    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
    window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }, 200)
    }
    }
    </script>

2.安卓弹出的键盘遮盖文本框

  • 现状:安卓微信H5弹出软键盘后挡住input输入框
  • 原因:因为调用安卓键盘有一点迟钝,导致如果不延时处理的话,滚动就失效了
  • 解决方法:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <input @focus="focus()"/>
    <script>
    focus(){
    let u = navigator.userAgent;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
    if(isAndroid){
    setTimeout(function() {
    document.activeElement.scrollIntoViewIfNeeded();
    document.activeElement.scrollIntoView();
    }, 500);
    }
    }
    </script>

    Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动

3.Vue中路由使用hash模式,开发微信H5页面分享时在安卓上设置分享成功,但是ios的分享异常

  • 现状:ios当前页面分享给好友,点击进来是正常,如果二次分享,则异常;使用vue router跳转到第二个页面后在分享时,分享设置失败;以上安卓分享都是正常
  • 原因:jssdk是后端进行签署,前端校验,但是有时跨域,ios是分享以后会自动带上 from=singlemessage&isappinstalled=0 以及其他参数,#/在微信中会被截断,导致分享链接和传入API的链接不一样
  • 解决方法:分享的url再ios下加个编码方法encodeURIComponent(url)

4.ios下input样式问题

1.ios下如果想要禁用input,input设置为readonly仍然会呼起键盘,所以必须设置disabled属性。
2.ios下设置为disabled属性,input表单背景颜色会变灰,透明度会降低,所以,必须设置

1
2
3
4
5
input:disabled{
opacity:1;
bakcground:#fff;
-webkit-text-fill-color:#2e3d4c;//字体颜色填充这个属性可以解决IOS字体颜色变淡的问题
}

然而,设置了-webkit-text-fill-color属性还是会有问题,placeholder字体颜色也会跟着改变,所以placeholder也要设置-webkit-text-fill-color值

1
2
3
4
5
6
/* 题外话:(设置渐变字体) */
*{
background: -webkit-linear-gradient(top,#fc0,#f30 50%,#c00 51%,#600);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

如果想设置渐变字体,要保证这个标签中只有要设置的文本,不能有其他标签,否则在PC浏览器正常,而在iOS中显示不出来

3.没错,iOS下就是各种坑,
user-select:none 控制着用户能否选中文本
一般都不想被复制,所以全局使用这个属性,就会导致在ios中,input无法定位光标,无法输入;
所以慎用,或者局部使用;
或者给表单单独加个user-select: auto;默认值