css3之移動平臺資源

隨着移動端愈來愈普及，前端技術也是百花齊放，但目前移動平臺的技術已經趨向於成熟，記得剛實習的時候就是接觸的移動端，但如今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