美文网首页
vconsole在低版本浏览器上白屏问题(包括ios Andro

vconsole在低版本浏览器上白屏问题(包括ios Andro

作者: 子绎 | 来源:发表于2022-11-27 15:30 被阅读0次

    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
    
    

    至此,问题解决..

    相关文章

      网友评论

          本文标题:vconsole在低版本浏览器上白屏问题(包括ios Andro

          本文链接:https://www.haomeiwen.com/subject/upfkfdtx.html