Vue项目在部分ios手机Safari浏览器上打开为白屏

Vue项目在部分ios手机Safari浏览器上打开为白屏,第1张

Vue项目部分ios手机Safari浏览器上打开为白屏有可能是一下原因造成:

第一:部分es6语法不兼容     推荐在全局引入 babel-polyfill 解决es6在Safari的兼容问题

第二:有部分Safari浏览器设置了不允许网站读写所有cookie,不允许网站跟踪,这种仔历情况下在项目中使用                localStorage sessionStorage  cookie都会报错(大部分是这个原因)

            查看Safari隐樱扮私和安全性:设置->Safari

第三:在Safari如何跟踪调试

            1、打开手机端web检查器,设置->Safari ->高级(最底部)->Web检查器打开

         脊戚灶   2、确保iOS系统手机接入 MAC 电脑(必须是Mac,window调试不了ios系统)

            3、找到Mac电脑的 Safari浏览器,找到开发者,就会显示的手机的设备

            4、此时此刻就可以使用了,调试各个App上网页版的页面了。

            注:如果是 Hybrid 嵌入式开发,线上版本,可能就不能调试了,因为IOS App 会把线上的调试功能               给禁用,安全!

我们做vue项目也遇到过这个问题,不支持ES6的浏览器打开就是一片空白(已测试小米和iphone支持,华为和一加不支持)。如果你是wabpack项目打桐培大包应该没这问题(我试过了),如果是静态页面CDN引入vue就会有这个问题。

解决方法:局竖

方法一:页面引入babel-polyfill。

<script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-beta.49/polyfill.min.js"></script>

方法二:参考网中掘友王泽平的博客

npm install --save-dev babel-polyfill

引入babel-polyfill的方法有三种:

import "babel-polyfill" require("babel-polyfill") module.exports = {

 entry: ["babel-polyfill", "./app/js"]

}

我是一个程序员。第一次用,不局渗知写些什么最近刚好碰到一个bug,就在这里记录下来吧(程序员的臭毛病就是写bug记录)。

在ios上写的列表页面跳转到详情页面后点击返回键列表页面出现了部分白屏,然后下滑一下埋腊喊页面白屏就消失了,后来查了一下资料应该是跟ios浏览器滚动机制有关系然后影弯野响了页面的渲染。记录下解决方法。

#app{

    position:relative

}

在列表父级加一个定位就可以了


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12429149.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存