移动端bug之解决方式

一、Android中元素被点击时产生的边框:

* { -webkit-tap-highlight-color: rgba(250,250,250,0);   /*更改点击事件的焦点色*/}

二、去除移动端输入框内阴影:

input,
textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

三、禁止文字选中内容:

.div {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all （移动端不须要） */
  -ms-user-select: none;      /* IE 10+ */     
}

四、解决在移动端1px显示2px视觉效果：

.scale{
    position: relative;
}
.scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #adadad;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

retina屏1px问题

缘由：

设备像素比(device pixel ratio,简称dpr) = 物理像素 / 设备独立像素；

css中的1px,也就是设备独立像素，并不等于移动设备的1px(物理像素)，这些因为不一样的手机有不一样的设备像素比。

解决方案：

1.经过viewport + REM的方式来兼容。

目前这种兼容方案相对比较完美，适合新项目（老项目改用REM单位成本会比较高）。淘宝M首页就是这种方案。

在devicePixelRatio = 2 时，输出viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 时，输出viewport

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-

scale=0.3333333333333333, user-scalable=no">

 

五、苹果得微信页面有一串数字的话，这个数字会加上a标签:

<meta name="format-detection" content="telephone=no" />

六、图片在线压缩：

http://www.tuhaokuai.com/image

七、获取URL上的参数

/**
     * 方法说明：获取URL上的参数
     * 建立时间：2014-06-19 YYF
     * @param name
     * @returns
        */
    function getUrlParam(name) {

        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象

        var r = window.location.search.substr(1).match(reg);  //匹配目标参数

        if (r != null)
        return unescape(r[2]);
        return null; //返回参数值
    }

八、css3垂直居中：

display: -webkit-box;
 -webkit-box-orient: horizontal;
 -webkit-box-pack: center;
 -webkit-box-align: center;
 display: box;
 box-orient: horizontal;
 box-pack: center;
 box-align: center;

九、进入微信公众号页面地址：

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIyUwMjQ4OA==#wechat_redirect

十、去除textarea默认样式 ：

outline:none;resize:none;

十一、input placeholder更换字体颜色：

::-webkit-input-placeholder{color:#f00;}

十二、css3 animation动画加多个：

#demo {
    /* 指定动画名称 */
    animation-name: animation1, animation2;
    /* 指定动画时长 */
    animation-duration: 2s 1s;
}

1三、隐藏微信右上角分享按钮：

//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
        document.addEventListener("WeixinJSBridgeReady", function () {
            // 经过下面这个API隐藏右上角按钮
            WeixinJSBridge.call('hideOptionMenu');
        }, false);

1四、若是在微信页面右上角隐藏了分享按钮，跳转新的页面都不能分享了，新的页面必须从新打开微信的分享按钮：

function onBridgeReady(){
      WeixinJSBridge.call('showOptionMenu');
}

if (typeof WeixinJSBridge == "undefined"){
        if( document.addEventListener ){
           document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
         }else if (document.attachEvent){
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
         }
 }else{
       onBridgeReady();
 }    

 1五、关于iscroll插件在移动端的应用滑动出现卡顿、不流畅问题:

1，加上：document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);2，把滚动条设置为隐藏：vScrollbar: false3，尽可能去掉没必要要的滚动监听事件以上完美解决了移动端滚动不流畅的问题