javascript - iphone7上测试vue的移动端项目，无法全屏显示。怎样不被safari的地址栏和工具栏遮挡？
在safari浏览器上，明明打开的其他的手机网站都能实现在页面滑动时会隐藏地址栏和工具栏。可为什么显示我的本地项目时就会被这两个玩意给遮挡呢，别的网站是怎么实现的呢。
百度了很久也没解决，各种什么viewport-fit=cover 和 env函数的解决办法，没有一个解决办法是有效果的。
别人也有过类似的提问，下面的回复的方法也是无效的，我真是疯了。不知道这个看似简单的东西为什么这么难搞。希望有了解这个的前辈能帮忙指点一下。
手机是: iphone7
ios版本是：15.7.9
共有2个答案
看看这个帖子：https://stackoverflow.com/questions/4117377/how-do-i-hide-the-address-bar-on-iphone#:~:text=If%20the%20page%20doesn%27t%20overflow,bookmark%20on%20the%20home%20screen
https://stackoverflow.com/questions/68094609/ios-15-safari-floating-address-bar#:~:text=7%20Answers%20Sorted%20by%3A%2043,of%20the%20smallest%20possible%20viewport
现在知道问题出来哪了。
我不再用自己的项目测试，而是只用最精简的页面进行测试，发现只要内容调试超过屏幕调试可以滚动，safari浏览器默认就会在你滚动的时候隐藏地址栏和工具栏。不需要添加任何额外的css代码或js代码或meta标签的属性。
那我的项目中为什么就不行呢？
原因是我的单页应用中很多页面组件都是嵌套组件，嵌套组件内的外层容器都是宽度和宽度100%，设置了固定定位。在定位元素中的滚动是无法隐藏地址栏和工具栏的。可嵌套组件不用定位根本没法盖住父组件啊。
于是我只能到把嵌套路由全都改成了平级的路由，然后就可以取消组件内外层容器的定位布局。这样就正常了。
可这样虽然解决了safari的地址栏和工具栏的问题，但造成的影响也很大。那就是我无法再使用vue的嵌套组件了。
-
本文向大家介绍移动端WebApp隐藏地址栏的方法，包括了移动端WebApp隐藏地址栏的方法的使用技巧和注意事项，需要的朋友参考一下 1、很多资料说，添加以下代码,可以隐藏地址栏，但我试了很多次，貌似不成功啊。 2、我们可以通过另一种方法来隐藏地址栏。在页面加载完成之后滚动窗口，这个确实有效，唯一要注意的是页面高度必须够高，核心代码如下: 3、但是当页面高度自适应窗口（height:100%），以上
-
本文向大家介绍Android 实现全屏和无标题栏的显示，包括了Android 实现全屏和无标题栏的显示的使用技巧和注意事项，需要的朋友参考一下 在Android实现没有标题栏的方法有两种： 在代码中添加 在清单文件AndroidManifest.xml中添加 具体的代码如下： 第一种： 第二种： 效果图： 如果想让窗口全屏显示： 将下面两段代码分别替换上面的两段设置无标题的代码就可以了 效果图：
-
我在中有一个可以膨胀的工具栏。我有一个名为的菜单，它会膨胀，只显示一个图标。 当用户单击打开片段时。我有另一个菜单，它有两个图标。 当我在片段中膨胀friends菜单时，它仍然显示菜单中的图标。 非常感谢您的任何建议，
-
我尝试在我的主题中设置以下内容，但似乎并没有改变什么：
-
我正在我的应用程序中实现折叠工具栏，它应该没问题，但栏不受限制..不动不做任何!!! 这是我的布局. xml 这是我的活动 请告诉我为什么，提前谢谢！ 更新：我已经解决了NestedScrollView的问题，我做了如下操作：
-
我已经看到在新的材料设计侧导航规范，你可以显示抽屉在行动栏和状态栏后面。我该如何实施这一点？