美文网首页
09_之前写过h5吗?有遇到过哪些兼容性问题?说下怎么解决的

09_之前写过h5吗?有遇到过哪些兼容性问题?说下怎么解决的

作者: 沐向 | 来源:发表于2020-04-15 09:59 被阅读0次

一、H5兼容性问题

H5在安卓机型和IOS机型或者相同机型的不同浏览器中的某些样式会存在不一样的表现,所以需要解决相应的兼容性问题

二、IOS常见兼容性问题

1、IOS端兼容input光标高度

  • 问题症状:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样
  • 原因分析:通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),当点击输入的时候,光标的高度就自动和父盒子的高度一样了。(谷歌浏览器的设计原则,还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值,当有内容时,光标从input的顶端到文字的底部)
  • 解决方案:高度height和行高line-height内容用padding撑开

2、IOS键盘唤起,键盘收起以后页面不归位

  • 问题症状:输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑
  • 原因分析:固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件
  • 解决方案:
changeBlur () {
     let u = navigator.userAgent, app = navigator.appVersion;
     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)
     }
}
  • 拓展知识: position: fixed的元素在IOS里,收起键盘的时候会被顶上去,特别是第三方键盘

3、IOS端h5页面上下滑动时卡顿、页面缺失

  • 问题描述:在IOS端,上下滑动页面时,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况
  • 解决方案:只需要在公共样式加入下面这行代码
* {
  -webkit-overflow-scrolling: touch;
}

扩展知识:-webkit-overflow-scrolling是什么?

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。

touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

4、IOS移动端click事件300ms的延迟响应

  • 问题描述:移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效
    解决方案:

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

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

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

5、IOS双击页面缩放禁止

  • 问题描述:IOS10中自带的Safari浏览器不识别meta viewport
  • IOS10以外解决移动端禁止页面缩放的方法:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  • IOS10解决方案:

(1)禁用双指缩放

document.documentElement.addEventListener('touchstart', function (event) {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, false);

(2)禁用手指双击缩放

var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
  var now = Date.now();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

三、微信浏览器常见兼容性问题

1、填写表单信息弹出键盘会把页面顶上去,键盘消失的时候页面不自动下来

解决方案:使用onblur方法在表单失去焦点的时候让页面滚动到最顶部。

<form class="form" action="" method="">
    <div>
        <label for="idNumber">身份证号</label><input type="text" name="idNumber" onblur="window.scrollTo(0, 0);" id="idNumber">
    </div>
</form>

2、去除移动端点击时的背景

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
 }

3、去掉input框的默认样式

input {
    background-color: transparent;/*背景变透明*/
    filter: alpha(opacity=0); /*androd*/
    appearance: none;  /*去除系统默认appearance的样式,常用于IOS下移除原生样式(下拉框去掉右侧图标等)*/
    -moz-appearance: none;
    -webkit-appearance: none;
}

4、音视频不自动播放

  • 原因分析:出于节省流量的初衷,IOS系统禁止音视频自动播放
  • 解决方案:使用微信的JS-SDK

(1)先引入微信的JS-SDK

 <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

(2)然后在wx.ready中调用play方法播放

var audio = document.getElementById('bgmusic');
    autoPlayAudio();
    function autoPlayAudio() {
        wx.config({
            // 配置信息, 即使不正确也能使用 wx.ready
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        });
        wx.ready(function() {
            audio.play();
        });
    }

四、其他兼容性问题

1、在IOS手机上,绑定click事件到非button元素的元素上,IOS下不会触发

解决方案:元素样式添加 cursor:pointer

2、在IOS中li元素按下会有阴影效果

 -webkit-tap-highlight-color: transparent;

3、在IOS中,input会有内阴影

 -webkit-appearance:none;

4、IOS下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

5、禁止IOS弹出各种操作窗口

-webkit-touch-callout:none

6、禁止IOS和android用户选中文字

-webkit-user-select:none

7、禁止IOS识别长串数字为电话

<meta content="telephone=no" name="format-detection" />

8、禁止IOS手机识别邮箱

<meta content="email=no" name="format-detection" />

9、IOS系统中文输入法输入英文时,字母之间可能会出现一个六分之一空格

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

10、阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

11、在移动端修改难看的点击的高亮效果,IOS和安卓下都有效

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

12、往返缓存问题

点击浏览器的回退,有时候不会自动执行js,特别是在mobilesafari中。这与往返缓存(bfcache)有关系。

解决方法 :window.onunload = function(){};

13、Input 的placeholder会出现文本位置偏上的情况

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

14、在IOS和andriod中,audio元素和video元素无法自动播放

element.addEventListener('touchstart',function(){
    audio.play()
},false)

15、消除 transition 闪屏

-webkit-transform-style: preserve-3d;     /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-backface-visibility: hidden;      /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/

16、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);

17、fixed定位缺陷

原因分析:

  • IOS下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
  • android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位
  • IOS4下不支持position:fixed

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

18、calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀,目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc,所以要在之前增加一个保守尺寸。

解决方案:

div { 
    width: 95%; 
    width: -webkit-calc(100% - 50px); 
    width: calc(100% - 50px); 
}

相关文章

网友评论

      本文标题:09_之前写过h5吗?有遇到过哪些兼容性问题?说下怎么解决的

      本文链接:https://www.haomeiwen.com/subject/ceuqvhtx.html