移动端bug之解决方式

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

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

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

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

3、禁止文字选中内容:

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

4、解决在移动端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">

 

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

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

6、图片在线压缩：

http://www.tuhaokuai.com/image

7、获取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; //返回参数值
    }

8、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;

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

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

10、去除textarea默认样式 ：

outline:none;resize:none;

11、input placeholder更换字体颜色：

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

12、css3 animation动画加多个：

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

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

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

14、如果在微信页面右上角隐藏了分享按钮，跳转新的页面都不能分享了，新的页面必须重新打开微信的分享按钮：

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();
 }