Web移動端常見問題

1、按鈕點擊時出現黑色背景

　　解決方法：

.class { -webkit-tap-highlight-color:rgba(0,0,0,0);}
.class { -webkit-appearance: none; -webkit-tap-highlight-color: transparent;}

 

2、iOS中僞類:active失效

　　解決方法：

$(function(){
    document.body.addEventListener('touchstart', function () { }); 
}) 

　　

3、移動端經常使用<meta>標籤

<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、響應式語法

@media screen and (max-width: 320px){
    .class { }
 }
@media screen and (min-width: 321px) and (max-width: 375px){
    .class { }
}

 

5、屏蔽瀏覽器滑動翻頁

　　解決方法

var doc = document.getElementById('id');
doc.addEventListener('touchmove', function(event) {
　　if(event.target.type == 'range') return;
　　event.preventDefault();
})

 

6、input標籤placeholder顏色

input::-webkit-input-placeholder{ color: orange;}
input:focus::-webkit-input-placeholder{ color: #09f;}

 

7、Andriod微信瀏覽器中a標籤若是不使用類名而用標籤命名，會讓同級標籤繼承其padding屬性。

<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字號的限制

.class { -webkit-text-size-adjust: none;}

 

9、去除手機自帶樣式(select,button)

.class { -webkit-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box;}

 

10、移動端彈窗出現時，禁止底部內容

$("彈層").on("touchmove",function(event){
    if($("彈層").is(":visible")==true){
        event.preventDefault();
    }
})