移动端常见兼容性问题

css 阅读量

    本文主要想记录下最近工作中遇到的一些移动端兼容问题，便于日后能够快速解决一些 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.

访客数 : | 访问量 :