苹果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 鲜为人知的属性