vconsole在低版本浏览器上白屏问题(包括ios Android)Vue解决方案

vconsole是一个在移动设备上调试的神器,但是在某些手机上,会有白屏问题。
先看报错:

Uncaught ReferenceError: ResizeObserver is not defined,source: http://10.1.2.113:8081/js/app.js(4422)

这段报错指出ResizeObserver 这个方法找不到
百度找了一下这个API


image.png

这个api是用来vconsole界面大小适配用的


image.png

这个api的兼容性其实已经算很好了,但耐不住公司有特别古老的机型在测试,最低版本的安卓也是2018年月更新的适配。

为了解决这个适配问题

  1. 安装resize-observer-polyfill
yarn  add resize-observer-polyfill
或者
npm i resize-observer-polyfill

2.main.js引入

import ResizeObserver from 'resize-observer-polyfill'
挂载到window上,因为插件内是使用的new语法 会直接在window上找
 window.ResizeObserver = ResizeObserver

至此,问题解决..

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容