移動端bug彙總（一）

1.點擊樣式閃動
Q: 當你點擊一個連接或者經過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景。

A:根本緣由是-webkit-tap-highlight-color，這個屬性是用於設定元素在移動設備（如Adnroid、iOS）上被觸發點擊事件時，響應的背景框的顏色。建議寫在樣式初始化中以免因此問題：div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出現藍色邊框：outline:none；

-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;
// i.e . Nexus5/Chrome and Kindle Fire HD 7 ''
-webkit-tap-highlight-color : transparent ;

2.屏蔽用戶選擇
Q: 禁止用戶選擇頁面中的文字或者圖片

A:代碼以下

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

3移動端如何清除輸入框內陰影
Q: 在iOS上，輸入框默認有內部陰影，但沒法使用 box-shadow 來清除，若是不須要陰影，能夠這樣關閉：

A:代碼以下

-webkit-appearance: none;

4.禁止文本縮放
Q: 禁止文本縮放

A:代碼以下

-webkit-text-size-adjust: 100%;

5.如何禁止保存或拷貝圖像
Q: 如何禁止保存或拷貝圖像

A:代碼以下

img{
-webkit-touch-callout: none;}

6.解決字體在移動端比例縮小後出現鋸齒的問題
Q: 解決字體在移動端比例縮小後出現鋸齒的問題

A:代碼以下

-webkit-font-smoothing: antialiased;

7.設置input裏面placeholder字體的大小
Q: 設置input裏面placeholder字體的大小

A:代碼以下

::-webkit-input-placeholder{ font-size:10pt;}

8.audio元素和video元素在ios和andriod中沒法自動播放
Q: audio元素和video元素在ios和andriod中沒法自動播放

A:代碼以下,觸屏及播放

$('html').one('touchstart',function(){
audio.play()
})

9.手機拍照和上傳圖片
Q: 針對file類型增長不一樣的accept字段

A:代碼以下

<input type="file">的accept 屬性
<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視頻 -->
<input type=file accept="video/*">

10.輸入框自動填充顏色
Q: 針對input標籤已經輸入過的，會針對曾經輸入的內容填充黃色背景，這是webkit內核自動添加的，對應的屬性是autocomplete,默認是on,另對應的樣式是input:-webkit-autofill 且是不可更改的。

A:方案以下

• 1 設置標籤的autocomplete="off",親測無效可能
• 2 設置盒子的內陰影爲你常態的顏色（下面以白色爲例）
  box-shadow:0 0 0 1000px #fff inset ;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;

11.開啓硬件加速
Q: 優化渲染性能

A:代碼以下

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

12.用戶設置字號放大或者縮小致使頁面佈局錯誤

body  
    {  
        -webkit-text-size-adjust: 100% !important;  
        text-size-adjust: 100% !important;  
        -moz-text-size-adjust: 100% !important;  
    }

13.移動端去除type爲number的箭頭

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
      -webkit-appearance: none !important;
      margin: 0; 
  }

14.實現橫屏豎屏的方案

css 用 css3媒體查詢，缺點是寬度和高度很差控制

@media screen and (orientation: portrait) {
    .main {
        -webkit-transform:rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        width: 100vh;
        height: 100vh;
        /*去掉overflow 微信顯示正常，可是瀏覽器有問題，豎屏時強制橫屏縮小*/
        overflow: hidden;
    }
}

@media screen and (orientation: landscape) {
    .main {
        -webkit-transform:rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
}

js 判斷屏幕的方向或者resize事件

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, function() {
        var width = document.documentElement.clientWidth;
         var height =  document.documentElement.clientHeight;
          $print =  $('#print');
         if( width > height ){

            $print.width(width);
            $print.height(height);
            $print.css('top',  0 );
            $print.css('left',  0 );
            $print.css('transform' , 'none');
            $print.css('transform-origin' , '50% 50%');
         }
         else{
            $print.width(height);
            $print.height(width);
            $print.css('top',  (height-width)/2 );
            $print.css('left',  0-(height-width)/2 );
            $print.css('transform' , 'rotate(90deg)');
            $print.css('transform-origin' , '50% 50%');
         }

    }, false);

個人博客即將搬運同步至騰訊雲+社區，邀請你們一同入駐：https://cloud.tencent.com/dev...