蘋果IOS版safari一些坑

※本文設計到的屬性都爲IOS版的 safari 瀏覽器

• -webkit-appearance :

  消除輸入框和按鈕的原生外觀，在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式 。

  注意：不一樣 type 的 input 使用這個屬性以後表現不一。text、button無樣式，radio、checkbox直接消失。

• -webkit-touch-callout :

  禁用長按頁面時的彈出菜單（IOS下有效），img和a標籤都要加。

• -webkit-tap-highlight-color :

  當你點擊一個連接或者經過Javascript定義的可點擊元素 (canvas,img) 的時候，它就會出現一個半透明的灰色背景。

  要重設這個表現，你能夠設置它爲任何顏色。

• 在移動端拖拽頁面 若是不想要原生瀏覽器的回彈效果

  阻止touchmove默認行爲（這個方法很暴力，若是頁面高度超出視圖寬度，則頁面沒法正常滾動）

  $(document).on(‘touchmove’, function(e){
      e.preventDefault();
  })

• 蘋果自帶瀏覽器不容許音頻和視頻資源自動播放（防止用戶在流量狀態下流量偷跑）

  必修由用戶主動觸發事件才能播放，模擬事件也不行

  蘋果自帶瀏覽器不支持 audio 標籤的 canplaythrough 事件

參考：CSS3 不爲人知的屬性