本文是摘錄整理了移動端常見的一些bug以及解決方案

點選樣式閃動 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 ;  

遮蔽使用者選擇

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;

移動端如何清除輸入框內陰影 Q: 在iOS上，輸入框預設有內部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關閉：

A:程式碼如下

-webkit-appearance: none;

禁止文字縮放 Q: 禁止文字縮放

A:程式碼如下

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

如何禁止儲存或拷貝影象 Q: 如何禁止儲存或拷貝影象

A:程式碼如下

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

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

A:程式碼如下

-webkit-font-smoothing: antialiased;

設定input裡面placeholder字型的大小 Q: 設定input裡面placeholder字型的大小

A:程式碼如下

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

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

A:程式碼如下,觸屏及播放

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

手機拍照和上傳圖片

Q: 針對file型別增加不同的accept欄位

A:程式碼如下

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

輸入框自動填充顏色 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;

開啟硬體加速 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);

使用者設定字號放大或者縮小導致頁面佈局錯誤

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

移動端去除type為number的箭頭

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

實現橫屏豎屏的方案

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

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

如果你依然在程式設計的世界裡迷茫，不知道自己的未來規劃，可以加入web前端學習交流群：731771211 裡面可以與大神一起交流並走出迷茫。小白可進群免費領取學習資料，看看前輩們是如何在程式設計的世界裡傲然前行！群裡不停更新最新的教程和學習方法（進群送web前端系統學習路線，詳細的前端專案實戰教學視訊），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。