隨著移動端越來越普及，前端技術也是百花齊放，但目前移動平台的技術已經趨向於成熟，記得剛實習的時候就是接觸的移動端，但現在2年多來，期間遇到了很多莫名其妙的問題，見證了手機使用者量的突飛猛進，興喜的是更多的人能見識到自己做的東西，這也是我一直一來的動力，當然也迎來了前所未有的挑戰，機型層出不窮，比如ov乙個月迭代一次的速度，也是比較可怕的。
safari瀏覽器下
去掉input輸入框半陰影效果（這是ios的預設樣式）：
.css
去掉元素點選半透明邊框：
.css
表單內容禁止選中：
.css
表單內容禁止拖放：
.css
修改placeholder顏色：
input::-webkit-input-placeholder
去掉android輸入框的語音鍵：
input::-webkit-input-speech-button
去掉input輸入框首字母大寫的問題：
<input
autocapitalize
="off"
autocorrect
="off"
/>
去掉input輸入框自動填充的問題（密碼輸入框，驗證碼輸入框）：
<input
autocomplete
="false"
/>
input數字鍵盤喚起（ios無小數點，android有，需要非法輸入校驗）：
<input
type
="text"
pattern
="[0-9]*"
>
去掉input獲取焦點高亮：
input:focus
去掉textarea右下角小箭頭：
textarea
拍照攝影功能：
<input
type
="file"
capture
="camera"
accept
="image/*"
>
<
input
type
="file"
accept
="video/*"
>
.css
滾動不流暢：
.css
硬體加速：
.css
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之沿環形路徑移動
實現環形路徑移動，我們主要利用以下兩個屬性 animation origin rotate 1turn 通用css樣式 round move move img keyframes spin class round div 分解效果圖 但是我們需要的只是讓沿環形軌跡運動，中間的小我們並不希望它旋轉，怎...
css3學習系列之移動屬性詳解
transform功能 放縮使用sacle方法實現文字或影象的放縮處理，在引數中指定縮放倍率，比如sacle 0.5 表示縮小50 例子如下 scale方法使用示例 示例文字 另外，可以分別指定元素水平方向的放大倍率與垂直方向的放大倍率，例子如下 scale方法使用示例 示例文字 傾斜使用skew方...
移動Web介面樣式 CSS3
移動web介面樣式 css3 css2.1發布至今已經有7年的歷史，在這7年裡，網際網路的發展已經發生了翻天覆地的變化。css2.1有時候難以滿足快速提高效能 提公升使用者體驗的web應用的需求。css3標準的出現就是增強css2.1的功能，減少的使用次數以及解決html頁面上的特殊效果。css3作...