移动端常见兼容性问题(二)

    之前的文章写了一些移动端常见的兼容性问题,本文将继续总结一些兼容问题的解决套路。

fixed 定位问题


fixed定位问题

主要代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
//红框部分
.city{
position:fixed;
top:50px;
height:300px;
overflow:auto;
-webkit-overflow-scrolling:touch;
z-index:100;
}
</style>
<body>
//绝对定位
<header></header>
//下半部分绝对定位
<div>
//红框部分
<div class="city"></div>
</div>
</body>

bug 描述:

1.在安卓机上,红框部分,超过的文字,无法通过滑动查看 2.在 ios 上,红框部分会随下半部分一起滚动。

bug 解决:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
//红框部分
.city{
position:fixed;
top:50px;
//把高度去掉,改为Bottom
bottom:50px;
overflow:auto;
-webkit-overflow-scrolling:touch;
z-index:100;
}
</style>
<body>
//绝对定位
<header></header>
//下半部分绝对定位
<div>
</div>
//将红框部分移出
<div class="city"></div>
</body>

ios 后台倒计时停止

主要代码:

1
2
3
4
5
6
7
8
var count = 30;
var inter = setInterval(clock, 1000);
function clock() {
count--
if (count < 1) {
clearInterval(inter);
}
}

bug 描述:

ios 切换到后台程序后,倒计时就停止了

bug 解决:

1
2
3
4
5
6
7
8
9
10
11
12
13
var old = new Date().getTime();
var count = 30;
var inter = setInterval(clock, 1000);
function clock() {
//计时器实时计算当前时间
var now = new Date().getTime();
var count = 30 - Math.floor((parseInt(now) - parseInt(old)) / 1000);

$(".clock").html(count);
if (count < 1) {
clearInterval(inter);
}
}

采用实时计算时间差的方式解决,具体效果可看倒计时测试

ios input disabled 灰色


ios输入框为disabled默认为灰色

bug 描述:

ios 下输入框为 disabled 时,默认字体为灰色

bug 解决:

1
2
3
input:disabled,textarea:disabled{
-webkit-opacity:1;
}

华为、小米键盘遮住输入框

主要代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
body{
height:100%;
}
.main{
top:0;
bottom:0;
left:0;
right:0;
background-image:cover;
overflow:auto;
position:absolute;
}
</style>
<body>
<div class="main">
//里面的所有输入框为自然布局
</div>
</body>

bug 描述:

点击页面较下面的输入框,键盘会遮挡输入框,且无法上拉页面。

bug 解决:

方法 1:可以上拉页面看到输入框

1
2
3
4
5
6
7
<style>
.main{
height:100%;
background-image:cover;
overflow:auto;
}
</style>

方法 2:可以自动顶起输入框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(function(){
var screenH=$(document).height();
$('input').focus(function(){
var top = $(this).offset().top;
var h=$(this).height();
if(top+h>screenH/2){
var scrollTop = $("滚动主体").scrollTop();
$("滚动主体").append("<div class='addHeight'></div>");
$(".addHeight").css('padding-bottom',screenH/2+'px');
$("滚动主体").scrollTop(screenH/2+screenTop-20);
}
});
$('input').blur(function(){
if($(".addHeight").length>0){
$(".addHeight").remove();
}
});
})();

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
34
35
36
37
<style>
header {
height: 50px;
background-color: red;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
.content {
top: 50px;
left: 0;
right: 0;
bottom: 0;
padding-bottom: 50px;
overflow: auto;
position: absolute;
background-color: green;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: red;
}
</style>

<body>
<header>头部</header>
<div class="content">
<input type="text" />
</div>
<div class="bottom">我是固定在底部的按钮</div>
</body>

bug 描述:

点击图中圈出的黄色输入框,键盘会遮住输入框,无法上弹

bug 解决:

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.content {
top: 50px;
left: 0;
right: 0;
bottom: 50px;
<!-- padding-bottom: 50px; -->
overflow: auto;
position: absolute;
background-color: green;
}
</style>

部分 Ios 手机不支持 css:focus:valid

bug 描述:

当给输入框加属性 required 的时候,用:focus:valid 加样式,部分手机不支持。但是单独支持:focus/:valid。

bug 解决:

用 js 判断,加样式。

ios 光标上下飘


ios光标上下飘
1
2
3
4
滚动部分{
-webkit-overflow-scrolling:touch;
overflow:auto;
}

bug 描述:

当两个样式并存时,拖动正在输入的页面,光标就会上下飘动。

bug 解决:

目前找到原因是因为这两个样式并存会导致。目前没有找到好的解决办法

IOS 点击闪屏问题

bug 描述:

点击页面,会出现闪屏现象

bug 解决:

1
2
3
html,body{
-webkit-tap-highlight-color: transparent;
}

Copyright ©2019 guowj All Rights Reserved.

访客数 : | 访问量 :