ios safari的坑

  2018-01-02 16:12

在正式从事web开发工作之前,我很少会考虑到浏览器的兼容性问题。IE无药可救,firefox用得人太少,基于兴趣的开发工作全部以chrome为基准,其他通通无所谓——与我无关。

换了Ubuntu系统后,常用浏览器从chrome更换到了firefox,才不得不考虑到firefox的兼容性来。最新的Firefox兼容性问题不大,公司用户群体firefox用户又特别少,有些细节如果兼容起来太麻烦就会忽略。

直到前一阵子,某个单页面的使用场景被限制在了ipad上,才不得不认真面对起兼容性这个问题来。

css兼容性问题

css3的兼容性最好解决,通通加上-webkit前缀即可(从前只是懒得加)。

此外就是<a>标签没有focusactive状态。解决办法:给body绑定一个ontouchstart空事件。

onclick点击事件

  • 非<button>和<a>标签没有点击事件
  • 点击事件有300ms的响应时间

300ms响应延迟事件显得页面反应特别慢,平板操作时很容易点击两次,会导致click事件触发不出来。

最快最便捷的解决办法是用ontouchstart事件代替onclick事件。

浏览器的手指双击放大页面功能会影响到click事件和touch事件的触发

解决办法:禁用(网上扒来的代码)

//禁用双指缩放
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
  var now = Date.now();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

无法使用getMedia调取摄像头

ios10及以下版本无法解决,搁置!

你好,游客!(点击更改信息)

您的电子邮件不会被公布,带*为必填。


  •   正在提交中,请稍候...
      评论提交成功
    回复 的评论,点击取消回复。