Web移动端常见问题

一、按钮点击时出现黑色背景

　　解决方法：

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

.class { -webkit-appearance: none; -webkit-tap-highlight-color: transparent;}

二、iOS中伪类:active失效

　　解决方法：

$(function(){

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

})

　　

三、移动端常用<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">

四、响应式语法

@media screen and (max-width: 320px){

    .class { }

 }

@media screen and (min-width: 321px) and (max-width: 375px){

    .class { }

}

五、屏蔽浏览器滑动翻页

　　解决方法

var doc = document.getElementById('id');

doc.addEventListener('touchmove', function(event) {

　　if(event.target.type == 'range') return;

　　event.preventDefault();

})

六、input标签placeholder颜色

input::-webkit-input-placeholder{ color: orange;}

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

七、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微信浏览器下：

八、解除移动端最小12字号的限制

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

九、去除手机自带样式(select,button)

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

十、移动端弹窗出现时，禁止底部内容

$("弹层").on("touchmove",function(event){

    if($("弹层").is(":visible")==true){

        event.preventDefault();

    }

})