100 视口高度在 Safari iOS 15 中不起作用新
我在使用 Safari iOS 15 底部选项卡时遇到问题。我之前提出的问题，一位用户表示已经在[此处][1]得到了解答。但这并不能解决我的问题，这个问题是 7 年前的问题，这似乎是 iOS 15 的特定问题。
我尝试过 env(safe-area-inset-bottom) 但这不起作用。
100vh 忽略 Safari 标签栏。
我需要标题垂直居中，因此我有一个包含 3 行的网格：
顶行：8em 用于徽标 中行：1fr 表示标题 底行：8em 为位置固定的菜单元素留出空间。
在其他没有底部标签栏的移动设备和 iPhone 的 Safari 桌面预览中，这一切看起来都很棒。
https://i.sstatic.net/aYVgy.jpg
但在运行 iOS 的实际 iPhone 上15、没有发生居中。
这是页面加载时发生的情况：
https://i.sstatic.net/chkKJ.png
如果我隐藏工具栏，它看起来不错。
https://i.sstatic.net/Q5fhh.png
我希望网格能够响应到 Safari 标签栏。
谢谢
I’m having issues with Safari iOS 15 bottom tab. My previous question a user said it had already been answered [here][1]. But this doesn't solve my issue, that question was from 7 years ago and this seems like a iOS 15 specific issue.
I've tried env(safe-area-inset-bottom) but that isn't working.
The 100vh is ignoring the Safari tab bar.
I need the heading to be vertically centered, so I have a grid with 3 rows:
Top row: 8em for Logo
Middle row: 1fr for Heading
Bottom row: 8em to leave room for position fixed menu elements.
It all looks great on other mobile devices with no bottom tab bar and in Safari desktop preview of iPhone.
https://i.sstatic.net/aYVgy.jpg
But on the actual iPhone running iOS 15, there’s no centering happening.
This is what happens when the page loads:
https://i.sstatic.net/chkKJ.png
If I hide the toolbar it looks good.
https://i.sstatic.net/Q5fhh.png
I want the grid to be responsive to the Safari tab bar.
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论