项目场景：

UI在走查时，发现项目在ios Safari 中带有绿色背景，如下图:

问题描述

UI在走查时，发现项目在ios Safari 中带有绿色背景，

查看代码，没有给body或者html添加任何关于绿色的背景。

原因分析：

对比了ios15和ios14，发现只有在ios15情况下才会出现这样的问题。所以搜了下关于ios15 Safari 下的一些H5页面问题。

结果得出，ios从版本 15 开始，Safari theme-color 在 macOS 和 iOS 上都支持该标签。

<meta name="theme-color" content="#319197">

Meta Theme Color and Trickery 文章地址

解决方案：

知道是这个meat标签问题后，才发现打包后的dist文件内的index.html有<meta name="theme-color" content="#4DBA87">，如下图：

所以推测应该是webpack打包时，加进去的代码。查找资料后，解决办法就是，在vue.config.js文件内添加themeColor: 'none'代码。

ios15 Safari H5页面带有绿色背景色，主题色相关推荐

解决方案：uni-app非nvue模式下切换主题后，App端闪屏、闪白、闪黑、状态栏主题色不稳定
uni-app主题色的BUG 解决步骤给App添加主题色的缓存标识新建 __uniappview.html 文件引入 copy-webpack-plugin 依赖创建 vue.config.j ...
window使用chrome调试ios设备的H5页面（Safari和APP）
window使用chrome调试ios设备的H5页面(Safari和APP) 1:用管理员身份打开PowerShell,不同操作系统打开方式不太一样,win10的话在搜索栏搜索就能找到( 2:查看Po ...
内置h5 调用safari系统浏览器打开_开发教我做设计：移动端H5页面中的橡皮筋效果...
什么是橡皮筋效果(Over Scroll)? 在浏览被H5与iOS客户端混合编程的页面时,由于Safari浏览器的特性,当H5页面滑动到页面顶部.页面底部的位置时,继续下拉/上拉H5网页会出现&quo ...
ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法参考文章: (1)ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 (2) ...
安卓系列手机的H5页面背景色失效的问题（踩坑手机小米8）
标题安卓系列手机的H5页面背景色失效的问题今天做手机端,微信小程序开发,根据实际需求,手写一个遮罩层页面开发完毕之后,进行真机测试,出现问题了,ios是好的 Android一款小米8就不行了在打 ...
关于微信跳转H5页面，背景色显示灰色问题
今天公司做了一个微信跳转H5页面,绑定个人信息的小项目,中间测试环节一个小bug,本来好好的H5页面,在有的安卓手机上显示为灰色,同样的页面在同一个安卓手机中,背景颜色不一致.浏览器中背景色默认是白色 ...
关于IDEA中JSP页面部分出现绿色背景色问题的解决
原因:在JSP页面部分出现绿色背景色的情况,大概率是因为乱使用alt + enter快捷键而导致的. 解决方法如下: ① 在file中,找到settings···,在其中直接搜索 injections ...
android 加载h5页面部分机型滑动卡顿回弹_网易爆款H5 的交互方法参考
在早些年,H5其实更像是手机上的PPT,只支持点击.滑动这些基础手势操作.以内容展示为主,交互形式为辅. 但到了今天,H5的玩法已经有了质的突破.不仅交互形式超多,形式与内容也能紧密结合,产生1+1大 ...
app应用内嵌h5页面怎么直接打开safari_localstroage过多存储满的情况下应该怎么办？...
技术很简单,业务很麻烦在大公司,同一个域名下可能存在几十上百条业务线,每条业务线都可能因为各种理由往 localStorage 里塞东西,跨页面传数据啦.缓存啦.离线化啦.性能优化啦...,5M 看 ...

ios15 Safari H5页面带有绿色背景色，主题色