浏览器兼容性

不同终端下的浏览器制定标准和生产差异

终端	制定者	制定标准	生产者	生产者差异
移动端	Google&Apple	系统版本	手机厂商	解决各大手机系统的浏览器兼容性
PC端	W3C	Web标准	浏览器厂商	解决各大PC系统的浏览器兼容性

点击查看当前浏览器市场份额

兼容性从检查到解决

• 明确要兼容的浏览器范围browserlist

  根据设定的范围检查覆盖率

• [可选]浏览器同步测试browsersync

  工具下载

  跨浏览器测试云平台

• 发现有兼容问题的属性caniuse

  查询某特性整体兼容情况

  检查某一浏览器兼容情况

• 解决兼容性问题modernizr或browserhacks

  modernizr——提供完整的特征检测方法，也能通过访问此链接检查访问的浏览器兼容情况

  browserhacks网站提供了常见的hack处理

  // 如果是CSS特性可尝试如下方式：
  const supportsCSS = window.CSS && window.CSS.supports;
  if (supportsCSS) {
    supportsCSS('display', 'flex');
  }

CSS样式兼容前缀

• 针对同一样式属性，分别为不同浏览器添加属性前缀，具体如下

  属性前缀	浏览器内核	浏览器
  -webkit-	WebKit	Safari、Chrome、Edge、Android、IOS
  -moz-	Gecko	Firefox