移動端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，儘可能去掉沒必要要的滾動監聽事件以上完美解決了移動端滾動不流暢的問題