一、按钮点击时出现黑色背景
解决方法：
|
1
2
|
.class { -webkit-tap-highlight-color:rgba(0,0,0,0);}
.class { -webkit-appearance: none; -webkit-tap-highlight-color: transparent;}
|
二、iOS中伪类:active失效
解决方法：
|
1
2
3
|
$(function(){
document.body.addEventListener('touchstart', function () { });
}) |
三、移动端常用<meta>标签
|
1
2
3
4
|
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
|
四、响应式语法
|
1
2
3
4
5
6
|
@media screen and (max-width: 320px){
.class { }
}
@media screen and (min-width: 321px) and (max-width: 375px){
.class { }
} |
五、屏蔽浏览器滑动翻页
解决方法
|
1
2
3
4
5
|
var doc = document.getElementById('id');
doc.addEventListener('touchmove', function(event) {
if(event.target.type == 'range') return;
event.preventDefault();}) |
六、input标签placeholder颜色
|
1
2
|
input::-webkit-input-placeholder{ color: orange;}
input:focus::-webkit-input-placeholder{ color: #09f;}
|
七、Andriod微信浏览器中a标签如果不使用类名而用标签命名，会让同级标签继承其padding属性。
|
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
|
<style>
.link {
width: 94%;
margin: 0 auto;
border: 1px solid #d8d8d8;
overflow: hidden;
}
.link dt {
overflow: hidden;
}
.link .tel a {
display: block;
float: left;
padding: 0.8rem 0;
}
.link .tel span {
float: right;
color: #d60037;
margin-right: 4%;
}
.link .title .a {
display: block;
float: left;
padding: 0.8rem 0;
}
.link .title span {
float: right;
color: #d60037;
margin-right: 4%;
}
</style>
<dl class="link">
<dt class="tel"><a href="#">服务热线</a><span>400-0608-911</span></dt>
<dt class="title"><a class="a" href="#">服务热线</a><span>400-0608-911</span></dt>
</dl>
|
iOS微信浏览器下：
Andriod微信浏览器下：
八、解除移动端最小12字号的限制
|
1
|
.class { -webkit-text-size-adjust: none;}
|
九、去除手机自带样式(select,button)
|
1
|
.class { -webkit-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box;}
|
十、移动端弹窗出现时，禁止底部内容
|
1
2
3
4
5
|
$("弹层").on("touchmove",function(event){
if($("弹层").is(":visible")==true){
event.preventDefault();
}
}) |
一、按钮点击时出现黑色背景
解决方法：
|
1
2
|
.class { -webkit-tap-highlight-color:rgba(0,0,0,0);}
.class { -webkit-appearance: none; -webkit-tap-highlight-color: transparent;}
|
二、iOS中伪类:active失效
解决方法：
|
1
2
3
|
$(function(){
document.body.addEventListener('touchstart', function () { });
}) |
三、移动端常用<meta>标签
|
1
2
3
4
|
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
|
四、响应式语法
|
1
2
3
4
5
6
|
@media screen and (max-width: 320px){
.class { }
}
@media screen and (min-width: 321px) and (max-width: 375px){
.class { }
} |
五、屏蔽浏览器滑动翻页
解决方法
|
1
2
3
4
5
|
var doc = document.getElementById('id');
doc.addEventListener('touchmove', function(event) {
if(event.target.type == 'range') return;
event.preventDefault();}) |
六、input标签placeholder颜色
|
1
2
|
input::-webkit-input-placeholder{ color: orange;}
input:focus::-webkit-input-placeholder{ color: #09f;}
|
七、Andriod微信浏览器中a标签如果不使用类名而用标签命名，会让同级标签继承其padding属性。
|
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
|
<style>
.link {
width: 94%;
margin: 0 auto;
border: 1px solid #d8d8d8;
overflow: hidden;
}
.link dt {
overflow: hidden;
}
.link .tel a {
display: block;
float: left;
padding: 0.8rem 0;
}
.link .tel span {
float: right;
color: #d60037;
margin-right: 4%;
}
.link .title .a {
display: block;
float: left;
padding: 0.8rem 0;
}
.link .title span {
float: right;
color: #d60037;
margin-right: 4%;
}
</style>
<dl class="link">
<dt class="tel"><a href="#">服务热线</a><span>400-0608-911</span></dt>
<dt class="title"><a class="a" href="#">服务热线</a><span>400-0608-911</span></dt>
</dl>
|
iOS微信浏览器下：
Andriod微信浏览器下：
八、解除移动端最小12字号的限制
|
1
|
.class { -webkit-text-size-adjust: none;}
|
九、去除手机自带样式(select,button)
|
1
|
.class { -webkit-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box;}
|
十、移动端弹窗出现时，禁止底部内容
|
1
2
3
4
5
|
$("弹层").on("touchmove",function(event){
if($("弹层").is(":visible")==true){
event.preventDefault();
}
}) |