隨著移動端越來越普及，前端技術也是百花齊放，但目前移動平臺的技術已經趨向於成熟，記得剛實習的時候就是接觸的移動端，但現在2年多來，期間遇到了很多莫名其妙的問題，見證了手機用戶量的突飛猛進，興喜的是更多的人能見識到自己做的東西，這也是我一直一來的動力，當然也迎來了前所未有的挑戰，機型層出不窮，比如OV一個月叠代一次的速度，也是比較可怕的。

下面列舉一下一些常用問題的調整技巧：

safari瀏覽器下

去掉input輸入框半陰影效果（這是IOS的默認樣式）：

input{-webkit-appearance:none;}

鏈接圖片禁止觸發長按回調：

.css {
  -webkit-touch-callout
 
: none;
}

去掉元素點擊半透明邊框：

.css {
  -webkit-tap-highlight-color: transparent;
}

表單內容禁止選中：

.css {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}

表單內容禁止拖放：

.css {
  -webkit-user-drag: none;
}

修改placeholder顏色：

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

去掉android輸入框的語音鍵：

input::-webkit-input-speech-button {
  display: none;
}

去掉input輸入框首字母大寫的問題：

<input autocapitalize="off" autocorrect="off" />

去掉input輸入框自動填充的問題（密碼輸入框，驗證碼輸入框）：

<input autocomplete="false"/>

input數字鍵盤喚起（iOS無小數點，android有，需要非法輸入校驗）：

<input type
 
="text" pattern="[0-9]*">

去掉input獲取焦點高亮：

input:focus {
  outline: none;
}

去掉textarea右下角小箭頭：

textarea {
  resize: none;
}

拍照攝影功能：

<input type="file" capture="camera" accept="image/*">
<input type="file" accept="video/*">

微信瀏覽器字體顏色改不了：

.css {
  -webkit-text-fill-color: #999999;
}

滾動不流暢：

.css {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

硬件加速：

.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

Android webview上默認data-dpr="1"，這是因為android手機普遍采用LCD屏，

但實際dpr可能不止是1，大部分是2，也可能是3，屏幕尺寸卻還是一倍圖尺寸

iOS webview上默認data-dpr="2"或者data-dpr="3"，這是因為iOS普遍采用高清屏，

實際dpr就是data-dpr的值，屏幕尺寸為dpr值 X 1倍圖尺寸

這裏對DPR倍圖適配的媒體查詢上要有所區別，data-dpr只能是對屏幕是否為高清屏做區分，而對LCD屏的劃分不是很準確，首先對於iOS的適配肯定是需要DPR做倍圖劃分的，而iPhoneX Retina屏的出現導致DPR的值是無法準確估計的，因此iOS適配上采用最小DPR去適配效果會好一些，而Android上各個LCD屏幕最大的DPR都是固定的，因此iOS和Android的媒體查詢區別如下：

//android
@media only screen and (-webkit-max-device-pixel-ratio: @dpr) {

}
//ios
@media only screen and (-webkit-min-device-pixel-ratio: @dpr) {

}

當然另外一個有意思的地方是Android上部分機型可以適配非公開屬性-webkit-device-pixel-ratio，對應的值為-webkit-max-device-pixel-ratio

css3之移動平臺資源