1.项目manifest.json中h5模板配置,模板中添加meta:
<meta name="apple-mobile-web-app-title" content="<%= htmlWebpackPlugin.options.title %>">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <!--应用全屏展示-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
2.真实ios Safari上访问h5页面,并”添加到主屏幕“
”添加到主屏幕“的方法参考:https://www.php.cn/faq/447747.html
3.打开主屏幕上刚添加的快捷方式,打开重力敢用,横竖屏切换一次,在竖屏下滑动就会出现如下问题:
重新竖屏显示时,仔细上下滑动一下就能发现问题,感觉多了一个status-bar的高度
vue2.x随便选一个代码都可以复现