移动端常见兼容性问题

    本文主要想记录下最近工作中遇到的一些移动端兼容问题,便于日后能够快速解决一些 Bug。

ios fixed 定位+长表单


ios fixed bug实例

主要代码:

1
2
3
4
5
6
7
8
<body>
<header>
<!-- fixed定位的头部 -->
<header>
<section>
<!-- 自然布局 -->
</section>
</body>

bug描述:

只有在ios上出现:当section过长(有滚动条时),表单获取焦点时。上图红色框的头部会掉落至绿色部分。

bug解决:

造成问题的原因:当表单获取焦点,键盘弹出时,可视高度变小。
解决方式:
1.表单获取焦点时,把fixed定位改成absolute;失去焦点时,改回来。
2.将 section 由自然布局改为绝对定位
个人建议:在实际开发中,尽量少使用fixed定位。


android fixed bug实例

主要代码:

1
2
3
4
5
6
7
8
9
10
11
<body>
<header>
<!-- absolute定位的头部 -->
<header>
<section>
<!-- 自然布局 -->
</section>
<section>
<!-- fixed定位的footer -->
</section>
</body>

bug描述:

只有在Android手机上出现:表单获取焦点时,系统键盘会将fixed定位的footer顶起来。

bug解决:

造成问题的原因:系统键盘会顶走fixed布局元素。
解决方式:
1.表单获取焦点时,把fixed定位的元素改成static;失焦后,再改回来。
2.表单获取焦点时,把fixed定位的元素设置为display:none;失焦后,再设置成为display:block。

ios 微信浏览器 长表单留白


ios 微信浏览器留白

bug描述:

只有在ios微信浏览器上出现。当输入框聚焦,系统键盘把页面顶起后,键盘收起。会发现页面底部留白

bug解决:

造成问题的原因:系统键盘弹出触发resize导致页面高度缩小。
解决方式:

1
2
3
4
5
$("input,textarea").blur(function () {
setTimeout(function () { //若不加定时器,部分手机会失效
$("body").scrollTop($(body).scrollTop()+1); //让页面偷偷滚动一下,消除空白
},100);
});

transform弹窗不居中


transform弹窗不居中

主要代码:

1
2
3
4
5
6
7
8
9
10
11
12
/*弹窗*/
.dialog-content {
position: absolute;
top: 50%;
left: 50%;
z-index: 10003;
width: 73%;
padding-top: .66667rem;
transform: translate(-50%,-50%);
background-color: rgba(255,255,255,.95);
border-radius: .21333rem;
}

bug描述:

在ios 8及以下的系统,弹窗不居中

bug解决:

造成问题的原因:Safari支持代替的-webkit-transform属性,读取不到transform属性
解决方式:加上-webkie-transform属性,注意兼容性写法顺序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*弹窗*/
.dialog-content {
position: absolute;
top: 50%;
left: 50%;
z-index: 10003;
width: 73%;
padding-top: .66667rem;
background-color: rgba(255,255,255,.95);
border-radius: .21333rem;
-webkit-transform: translate(-50%,-50%); //一定要加上兼容性的写法
-ms-transform: translate(-50%,-50%); //IE9以下不兼容,IE9支持代替的-ms-transform属性不过只支持2D
transform: translate(-50%,-50%);
}

ios 输入框背景色变黄


ios输入框变黄

主要代码:

1
2
3
4
5
6
7
input{
border: none;
background: 0 0;
display: block;
-webkit-tap-highlight-color: transparent; //只用于iOS。点击链接或者通过Javascript定义的可点击元素的时候,会出现一个半透明的灰色背景
-webkit-appearance: none; //消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式
}

bug描述:

自动填充表单时,输入框背景色变黄。

bug解决:

造成问题的原因:如果不设置,autocomplete默认是on的
解决方式:
1.利用H5新增属性 autocomplete=”off”,直接关闭自动填充

1
<input type="text"  autocomplete="off">

2.给form表单增加autocomplete=”off”,一次性取消表单内所有输入框的自动填充功能

1
2
3
<form  autocomplete="off">
<input type="text" >
</form>

3.利用css

1
2
3
4
5
//给input设置内置阴影!阴影大小一定要比你的input本身大
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;//输入框背景颜色
-webkit-text-fill-color: #000!important;//输入框文字颜色
}

ios 弹出框被遮罩层盖住


ios弹出框被遮罩层盖住

主要代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<body>
<header>
<!-- 头部代码 -->
</header>
<section class="content">
<!-- 打开弹窗按钮 -->
<section class="btn-wrap">
<input value="打开">
</section>
<!-- 弹出框 fixed定位-->
<div class="keyboard"></div>
</section>
<!-- 遮罩层 fixed定位-->
<div class="mask-black"></div>
</body>
<style>
.mask-black {
background-color: rgba(51,51,51,.75);
position: fixed;
z-index: 500;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.keyboard {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
}
</style>

bug描述:

在PC端及安卓上显示正常,唯独在ios上弹窗被遮档

bug解决:

造成问题的原因:虽然z-index的层级问题没错,但是代码结构不规范。个人感觉很多时候一些奇怪的bug来源于我们代码的不规范。
解决方式:将弹出框移至外层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<header>
<!-- 头部代码 -->
</header>
<section class="content">
<!-- 打开弹窗按钮 -->
<section class="btn-wrap">
<input value="打开">
</section>
</section>
<!-- 弹出框 fixed定位-->
<div class="keyboard"></div> //将弹出框移至外层
<!-- 遮罩层 fixed定位-->
<div class="mask-black"></div>
</body>

ios 时间格式

主要代码:

1
2
3
4
var a=new Date('2017/01/01'); //Sun Jan 01 2017 00:00:00 GMT+0800 (CST)
var b=new Date('01/02'); //Invalid Date
var date =new Date("2016/05/31 08:00"); //Tue May 31 2016 08:00:00 GMT+0800 (CST)
var date =new Date("2016-05-31 08:00"); //Invalid Date

bug 描述:

ios 对 date()的支持不一样,ios 只传月日或则“/”为不合理日期,ios 必须传年月日,且分隔符为“-”

bug 解决:

ios 必须传年月日,且必须用“/”分隔

ios fixed 按钮上下飘动


ios fixed按钮正常情况
ios fixed按钮飘动情况

主要代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<header>
<!-- 头部代码 绝对定位-->
</header>
<!-- 内容代码 绝对定位-->
<section class="content">
<!-- 列表 -->
<ul></ul>
<!-- fixed置底定位按钮 -->
<section class="btn-wrap">
<input value="打开">
</section>
</section>
</body>

bug描述:

只出现在ios上,当列表ul过长时,快速滚动页面,fixed置底按钮会上下飘动

bug解决:

解决方式:将fixed置底定位的按钮移到最外层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<body>
<header>
<!-- 头部代码 绝对定位-->
</header>
<!-- 内容代码 绝对定位-->
<section class="content">
<!-- 列表 -->
<ul></ul>
</section>
<!-- fixed置底定位按钮 移到最外层-->
<section class="btn-wrap">
<input value="打开">
</section>
</body>

h5虚拟键盘,密码框假光标移动问题


ios 假光标

描述:

      在使用h5虚拟键盘时,需要让输入框disabled,以至于没有系统光标。需要编写一个假光标,提升用户体验。因为输入框采用”type=”password”,所以会采用系统自带的密码遮掩点。每个系统密码遮掩点都不大一样。经过多台真机的多次调试,发现大致可分为四类:大部分安卓、vivo X9S、Vivo X20、ios。为了便于以后遇到类似问题,又需要大量时间进行调试,现在先记录下调试结果。

光标移动距离的计算:

光标移动距离=(密码个数*dotWidth)em;
Ios: dotWidth=1
vivo X9S: dotWidth=0.5
Vivo X20: dotWidth=0.49
其余机型:dotWidth=0.34
获取机型的方法:

1
2
3
if(navigator.userAgent.indexOf(“vivo X9s”)!==-1){
alert("是vivo X9s");
}

弹性盒子兼容问题

描述:

      之前做过基于Android的智能电视项目,最早的需求是说最低兼容到Android5.0以上,于是就疯狂舒畅自由的使用新版盒子模型的写法。可是需求总是多变的,在开发接近尾声的时候,改成了兼容到Android3还是4。于是在低版本电视上盒子布局的前端页面变得面目全非。导致后来在使用盒子模型的时候总是小心翼翼,毕竟低版本的电视和手机还是有人用的。现在就记录下常见盒子模型的兼容写法把,能够让我们在面对测试提出页面bug的时候,快速定位问题所在并且解决它~

兼容写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

//flex 布局
.flex{
display: -webkit-box; /_ 老版本语法 _/
display: -moz-box; /_ 老版本语法: Firefox/
display: -webkit-flex; /_ 新版本语法\*/
display: flex;
}

//两端对齐
.flex-between{
-webkit-box-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}

//左右、上下居中
.flex-center{
-webkit-box-pack: center; /_ 左右 _/
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center; /_ 上下 _/
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
}

//垂直对齐
.flex-column{
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}

//盒子相应比例(scss 写法)
@mixin flex-block($con:1){
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: $con;
-webkit-flex: $con;
flex: $con;
}
//引用方法:@include flex-block(\$con),能够快速实现想要的比例

`

Copyright ©2019 guowj All Rights Reserved.

访客数 : | 访问量 :