Html 移動web開發細節處理

一、-webkit-tap-highlight-color:rgba(255,255,255,0)能夠同時屏蔽ios和android下點擊元素時出現的陰影。
備註：transparent的屬性值在android下無效。

二、-webkit-appearance:none能夠同時屏蔽輸入框怪異的內陰影，解決iOS下沒法修改按鈕樣式，測試還發現一個小問題就是，加了上面的屬性後，iOS下默認仍是帶有圓角的，不過可使用 border-radius屬性修改。

三、-webkit-transform:translate3d(0, 0, 0)在ios下可讓動畫更加流暢（這個屬性會調用硬件加速模式，無需經過JS引擎，直接瀏覽器內核渲染），可是在android下不可亂用，不少見所未見的bug就是由於這個。

四、-webkit-background-size能夠作高清圖標，不過一些低版本的android只能識別background-size，因此有必要兩個都要寫上。

五、ios5+能夠經過scrollTo(0,0)來自動隱藏瀏覽器地址欄。

六、css3動畫會影響你的自動聚焦，因此自動聚焦要在動畫執行以前來作，或者直接捨棄。

七、//豎屏時使用的樣式

@media all and (orientation:portrait) {
.css{}
}
//橫屏時使用的樣式

@media all and (orientation:landscape) {
.css{}
}

八、audio和video沒法自動播放的問題，微信內置瀏覽器已解決此問題：

$('html').one('touchstart',function(){

    audio.play()
})//必須有交互動做纔會觸發

九、若是涉及較多域外連接，DNS Prefetching能夠幫你作DNS預解析。

 

十、若是你但願你的站點更多地在SNS上傳播，那麼Open Graph Protocol會比較適合你。

十一、當用iScroll時候，不能使用:focus{outline:0}僞類，不然滑動會卡。

十二、視頻全屏播放

//x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://">>

1三、解決閃屏，-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d；

1四、觸摸事件用touch系列，不要用click替代；

 

1五、滾動條滾動時沒有像ios原生那麼順滑流暢，沒有回彈效果

{overflow:auto;-webkit-overflow-scrolling:touch;}

1六、在處理IOS設備web頁面的時候經常會遇到這樣的問題，當我點擊摸個元素時，點擊區域會出現閃一下的狀況。解決方法其實很簡單，只須要給出現狀況的元素加上下面的樣式就能解決問題了。
       代碼以下：-webkit-tap-highlight-color: rgba(0,0,0,0);這是ios設備特有的樣式，原理是去掉ios背面的顏色。

 

1七、改變input默認提示placeholder的樣式：

::-webkit-input-placeholder{font-size: 0.24rem;color: #545454;line-h/ight: 0.4rem}

聚焦時不自動消失：

input:focus::-webkit-input-placeholder{

     opacity: 0;

}

 

1八、移除 input type="number" 時瀏覽器自帶的上下箭頭：

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

     -webkit-appearance: none !important;

     margin: 0;

}

 

1九、頁面發短信 打電話 發郵件

打電話

//href="tel:1857777777">打電話給:1857777777>

發短信，winphone系統無效

//href="sms:10086">發短信給: 10086>

寫郵件

//href="mailto:123@qq.com">123@qq.com>