iphone7上测试vue的移动端项目，无法全屏显示。怎样不被safari的地址栏和工具栏遮挡？
在safari浏览器上，明明打开的其他的手机网站都能实现在页面滑动时会隐藏地址栏和工具栏。可为什么显示我的本地项目时就会被这两个玩意给遮挡呢，别的网站是怎么实现的呢。
百度了很久也没解决，各种什么viewport-fit=cover 和 env函数的解决办法，没有一个解决办法是有效果的。
别人也有过类似的提问，下面的回复的方法也是无效的，我真是疯了。不知道这个看似简单的东西为什么这么难搞。希望有了解这个的前辈能帮忙指点一下。
手机是: iphone7
ios版本是：15.7.9
回答：
现在知道问题出来哪了。
我不再用自己的项目测试，而是只用最精简的页面进行测试，发现只要内容调试超过屏幕调试可以滚动，safari浏览器默认就会在你滚动的时候隐藏地址栏和工具栏。不需要添加任何额外的css代码或js代码或meta标签的属性。
那我的项目中为什么就不行呢？
原因是我的单页应用中很多页面组件都是嵌套组件，嵌套组件内的外层容器都是宽度和宽度100%，设置了固定定位。在定位元素中的滚动是无法隐藏地址栏和工具栏的。可嵌套组件不用定位根本没法盖住父组件啊。
于是我只能到把嵌套路由全都改成了平级的路由，然后就可以取消组件内外层容器的定位布局。这样就正常了。
可这样虽然解决了safari的地址栏和工具栏的问题，但造成的影响也很大。那就是我无法再使用vue的嵌套组件了。
回答：
看看这个帖子：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
以上是 iphone7上测试vue的移动端项目，无法全屏显示。怎样不被safari的地址栏和工具栏遮挡？ 的全部内容， 来源链接： utcz.com/p/934999.html
