Html 移動web開發細節處理

標籤：

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

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

3、-webkit-transform:translate3d(0, 0, 0)在ios下可以讓動畫更加流暢（這個屬性會調用硬體加速模式，無需通過JS引擎，直接瀏覽器核心渲染），但是在android下不可亂用，很多見所未見的bug就是因為這個。

4、-webkit-background-size可以做高清表徵圖，不過一些低版本的android只能識別background-size，所以有必要兩個都要寫上。

5、ios5+可以通過scrollTo(0,0)來自動隱藏瀏覽器地址欄。

6、css3動畫會影響你的自動聚焦，所以自動聚焦要在動畫執行之前來做，或者直接捨棄。

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

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

8、audio和video無法自動播放的問題，內建瀏覽器已解決此問題：

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

    audio.play()})//必須有互動動作才會觸發

9、如果涉及較多域外連結，DNS Prefetching可以幫你做DNS預解析。 10、如果你希望你的網站更多地在SNS上傳播，那麼Open Graph Protocol會比較適合你。
11、當用iScroll時候，不能使用:focus{outline:0}偽類，否則滑動會卡。
12、視頻全屏播放

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

13、解決閃屏，-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d；
14、觸摸事件用touch系列，不要用click替代； 15、捲軸滾動時沒有像ios原生那麼順滑流暢，沒有回彈效果{overflow:auto;-webkit-overflow-scrolling:touch;}
16、在處理IOS裝置web頁面的時候常常會遇到這樣的問題，當我點擊摸個元素時，點擊地區會出現閃一下的情況。解決方案其實很簡單，只需要給出現情況的元素加上下面的樣式就能解決問題了。
      代碼如下：-webkit-tap-highlight-color: rgba(0,0,0,0);這是ios裝置特有的樣式，原理是去掉ios背面的顏色。 17、改變input預設提示placeholder的樣式：::-webkit-input-placeholder{font-size: 0.24rem;color: #545454;line-h/ight: 0.4rem}聚焦時不自動消失：input:focus::-webkit-input-placeholder{    opacity: 0;} 18、移除 input type="number" 時瀏覽器內建的上下箭頭：input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {    -webkit-appearance: none !important;    margin: 0;} 19、頁面發簡訊 打電話 發郵件打電話

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

發簡訊，winphone系統無效

//href="sms:10086">發簡訊給: 10086>

寫郵件

//href="mailto:[email protected]">[email protected]>

Html 移動web開發細節處理