兼容性

Posted on

经常遇到的浏览器的兼容性有哪些？

  1. IE 浏览器不支持 Promise
    babel-polyfill → webpack.config.js 的 entry 中设置 [‘babel-polyfill’, ‘./src/main.js’]

  2. 各浏览器之间默认样式的差异
    normalize.css
    与 reset 区别 → normalize.css 消除各浏览器之间默认样式的差异、保留有用的默认样式；
    而 reset 会清除所有的默认样式，过于暴力，例如会让 h 标题标签不再默认加粗，ul li 前面默认的小圆点也没了）

  3. html5 某些新增标签不被识别
    html5shiv.js - 解决 ie9 以下对 html5 某些新增标签不识别的问题（e.g. video 标签不识别不显示）
    用法：[if lt IE 9]><![endif]
    通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式。

  4. CSS3 媒体查询失效
    respond.js - 能解决 ie9 以下不支持媒体查询问题

  5. 自动添加浏览器前缀
    posscss-loader+autoprefixer

  6. ie6 不支持 min-height/width
    添加额外的 _min-height ie6 识别

  7. 常见 hack（针对特定 ie 版本的样式控制）
    _color - ie6 识别
    *color - ie6/7 识别
    color: red\9; ie8 及以下识别

  8. ie 条件注释写法：(lt 小于 | gt 大于 | lte 小于等于 | gte 大于等于 | ! 不等于)

移动端兼容性？

  1. 移动端点透问题(解决办法)

  2. ios 滚动卡顿
    使用 better-scroll 插件

  3. ios 顶部输入框 fixed 布局失效（当键盘弹起时）❌

  4. 安卓 键盘遮挡输入框 ❌

  5. position:fixed; 在 android 下无效怎么处理？【❌ 待验证】

    原因：fixed 的元素是相对整个页面固定位置的，你在屏幕上滑动只是在移动这个所谓的 viewport ， 原来的网页还好好的在那，fixed 的内容也没有变过位置。

解决：

1
2
3
4
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>
  1. 移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？❌
    click 有 300ms 延迟,为了实现 safari 的双击事件的设计，浏览器要知道你是不是要双击操作。

Polyfill

什么是 Polyfill

polyfill 是“在旧版浏览器上复制标准 API 的 JavaScript 补充”,可以动态地加载 JavaScript 代码或库，在不支持这些标准 API 的浏览器中模拟它们。

例如，geolocation（地理位置）polyfill 可以在 navigator 对象上添加全局的 geolocation 对象，还能添加 getCurrentPosition 函数以及“坐标”回调对象， 所有这些都是 W3C 地理位置 API 定义的对象和函数。

因为 polyfill 模拟标准 API，所以能够以一种面向所有浏览器未来的方式针对这些 API 进行开发， 一旦对这些 API 的支持变成绝对大多数，则可以方便地去掉 polyfill，无需做任何额外工作。

  • 做的项目中，有没有用过或自己实现一些 polyfill 方案（兼容性处理方案）？❌
    比如： html5shiv、Geolocation、Placeholder

列举 IE 与其他浏览器不一样的特性？

事件目标对象

触发事件的元素被认为是目标（target）。而在 IE 中，目标包含在 event 对象的 srcElement 属性

获取字符代码

如果按键代表一个字符（shift、ctrl、alt 除外），IE 的 keyCode 会返回字符代码（Unicode），DOM 中按键的代码和字符是分离的，要获取字符代码，需要使用 charCode 属性

阻止某个事件的默认行为

IE 中阻止某个事件的默认行为，必须将 returnValue 属性设置为 false，Mozilla 中，需要调用 preventDefault() 方法

停止事件冒泡

IE 中阻止事件进一步冒泡，需要设置 cancelBubble 为 true，Mozzilla 中，需要调用 stopPropagation()