移动端H5常见兼容性问题_h5手机端常见的兼容性问题-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39933787/article/details/136459801

1、ios系统iphoneX等机型底部小横条处理

// 1.首先要在meta标签中加上viewport-fit=cover
<meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">

// 2.整个内容区域
html,body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
// 3.如有底部元素采用固定定位
.fixed{//固定元素类名
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff; // 另外background-color要有背景色的，不然会出现透明镂空的情况
}

2、vant登录重定向后出现跳转两次，左滑退出程序后ios出现白屏问题

原因：产生了一个空白页

方法：判断是iOS系统时，利用路由守卫实现一个退一步的操作

3、vant底部导航ios较新机型出现上下浮动问题

解决方法：index.html中设置overflow:hidden,然后在APP.vue中设置overflow:auto

4、iOS视频无法全屏播放，这个还没找到合适的方法

5、iOS无法隐藏滚动条，设置一个div盖住。。。

6、文件预览问题：iOS端不允许直接预览，需下载后看

7、微信前一页禁用分享，后一页打开，ios需要在进入页面之前禁用（beforeRouterEnter）,而不是在挂载后禁用(mounted)

8、点击输入框进入新的一页直接弹出键盘，安卓可以使用input自带属性，ios需模拟点击事件

8\ios键盘唤起，键盘收起以后页面不归位
给父盒子添加focusout,手动调整页面

<div class="search between_center" @focusout="inputBlur">
<input
type="text"
v-model="searchValue"
placeholder="请输入购买平台"
/>
<span @click="handleSearch"> 搜索</span>
<van-icon name="search" class="searchIcon" />
</div>
/**
* @method 通过focusout事件解决IOS键盘收起时界面不归位的问题
*/
inputBlur(e) {
if (
e &&
e.target &&
e.target.tagName &&
e.target.tagName.toLowerCase() === "input"
) {
window.scrollTo(0, 0);
}
},

9、html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel：就可以了。如下：

< a href=" ">400-810-6999 转 1034</ a>

拨打手机如下：

< a href="tel:15677776767">点击拨打 15677776767 </ a>

10、上下拉动滚动条时卡顿、慢

body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

Android3+和 iOS5+支持 CSS3 的新属性为 overflow-scrolling。

11.圆角bug

某些 Android 手机圆角失效

background-clip: padding-box;

12.ios 设置input 按钮样式会被默认样式覆盖

解决方式如下：

input,textarea {
border: 0;
-webkit-appearance: none;
}

设置默认样式为 none

13.IOS键盘字母输入，默认首字母大写

解决方案，设置如下属性

<input type="text"autocapitalize="off"/>

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

h5页面有个问题是，当输入框在最底部，点击软键盘后输入框会被遮挡。

解决办法：由于弹起输入法，会执行onresize 事件，根据窗口变化，将原先是固定定位的元素改为position:static;。当关闭输入法时再切换回position:absolute;。

var getHeight = $(document).height();
$(window).resize(function(){
 if($(document).height() < getHeight) {
  $('#footer').css('position','static');
 }else {
  $('#footer').css('position','absolute');
 }
});

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

解决方案：

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

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

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

16.在ios和andriod中,audio元素和video元素在无法自动播放

应对方案：触屏即播$('html').one('touchstart',function(){audio.play()})

17.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);

18.fixed定位缺陷

iOS 下，fixed定位的元素里如果有input，键盘弹起后，点击定位会上移，显示定位也会出问题

解决：不使用fixed

body {height: 100%;}

使用absolute 替代 fixed，相对于body定位

19.1px问题

1.体查询利用设备像素比缩放，设置小数像素；

    .border { border: 1px solid #999 }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .border { border: 0.5px solid #999 }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        .border { border: 0.333333px solid #999 }
    }

2.transform: scale(0.5) 方案

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

20.首屏白屏问题

减少入口文件

静态资源本地存储

图片压缩

UI框架按需加载

重复组件打包优化

SSR

GZip

21.轮播图提前占位

height:0;
font-size:0;
padding-bottom:33%

22.滚动条隐藏

在PC端隐藏html右侧默认滚动条

html {
        /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
        -ms-overflow-style:none;
        /*火狐下隐藏滚动条*/
        scrollbar-width: none;
    }
  /*Chrome下隐藏滚动条，溢出可以透明滚动*/
html::-webkit-scrollbar{width:0px}

移动端隐藏滚动条

1）给滚动条的部分设置宽高为100%， overflow-y: auto;

2）设置滚动条的部分::-webkit-scrollbar{

width: 0;
display:none;
}

23、在H5 ios端日期数据不支持'-'显示 yyyy-MM-dd HH:mm

解决方式：
yyyy-MM-dd HH:mm 转为 yyyy/MM/dd HH:mm