出现 Can't find variable: ResizeObserver 的解决办法

最近发现某些老版本的 iOS 手机上出现 Can't find variable: ResizeObserver 这个报错信息，原因是 Safari 13 以下版本的浏览器都不支持 ResizeObserver 这个对象。 本文介绍了如何让不支持的浏览器也能支持它。

使用 polyfill

resize-observer 这个库提供了一个 install 函数，它会把 ResizeObserver 注入到全局的 window 对象上。下面展示了解决步骤

1、使用 NPM 或 Yarn 安装 resize-observer

            npm install resize-observer
            # 或
            yarn add resize-observer
        

2、在调用之前先检查是否已原生支持。如果已支持则直接使用原生的函数，否则在执行安装

            
        import { install } from 'resize-observer';

        if (!window.ResizeObserver) install();
        

3、最后你就可以像原生支持的那样使用它了

            const ro = new window.ResizeObserver(() =>{
                console.log('resize observed!');
            });
            
            ro.observe(document.body);