1、按鈕點擊時出現黑色背景javascript
解決方法：css
|
1
2
|
.class { -webkit-tap-highlight-
color
:rgba(
0
,
0
,
0
,
0
);}
.class { -webkit-appearance:
none
; -webkit-tap-highlight-
color
:
transparent
;}
|
2、iOS中僞類:active失效html
解決方法：java
|
1
2
3
|
$(
function
(){
document.body.addEventListener(
'touchstart'
,
function
() { });
})
|
3、移動端經常使用<meta>標籤web
|
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">
|
4、響應式語法瀏覽器
|
1
2
3
4
5
6
|
@media
screen
and (
max-width
:
320px
){
.class { }
}
@media
screen
and (
min-width
:
321px
) and (
max-width
:
375px
){
.class { }
}
|
5、屏蔽瀏覽器滑動翻頁微信
解決方法app
|
1
2
3
4
5
|
var
doc = document.getElementById(
'id'
);
doc.addEventListener(
'touchmove'
,
function
(event) {
if
(event.target.type ==
'range'
)
return
;
event.preventDefault();
})
|
6、input標籤placeholder顏色post
|
1
2
|
input::-webkit-input-placeholder{
color
: orange;}
input:focus::-webkit-input-placeholder{
color
:
#09f
;}
|
7、Andriod微信瀏覽器中a標籤若是不使用類名而用標籤命名，會讓同級標籤繼承其padding屬性。spa
|
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微信瀏覽器下：
8、解除移動端最小12字號的限制
|
1
|
.class { -webkit-text-size-adjust:
none
;}
|
9、去除手機自帶樣式(select,button)
|
1
|
.class { -webkit-appearance:
none
; appearance:
none
; -webkit-box-sizing: border-box; box-sizing: border-box;}
|
10、移動端彈窗出現時，禁止底部內容
|
1
2
3
4
5
|
$(
"彈層"
).on(
"touchmove"
,
function
(event){
if
($(
"彈層"
).is(
":visible"
)==
true
){
event.preventDefault();
}
})
|