如何解决 ResizeObserver 兼容低版本浏览器问题

如何解决 ResizeObserver 兼容低版本浏览器问题

关于解决 ResizeObserver 浏览器兼容问题，网上一大堆教程，但是从来没说到点子上去，要么就是少说了导致一直找不到问题原因，那么让我们开始吧。

开始解决

• 安装 npm install resize-observer-polyfill 兼容库
• 引入到 main.js 或者相应的 入口文件 如下代码：

// 先引入到入口文件
import ResizeObserver from 'resize-observer-polyfill';

// 增加判断如果不支持当前依赖再设置即可
if (window.ResizeObserver === undefined) {
    window.ResizeObserver = ResizeObserver;
}

// 这样设置不管 ResizeObserver 在那个依赖或者代码文件被正常使用都不会报错

相关问题

为什么我配置了 babel 适配最低兼容还是无法解决？

当然无法解决，因为 ResizeObserver 并不在 babel 浏览器标准转换支持库之内，所以你只能通过引入 兼容代码库 来解决。

ResizeObserver兼容版本及文档？

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver