iOS15 Safari键盘弹出时如何检测浮动地址栏并解决内容遮挡问题
iOS15 Safari底部浮动地址栏内容遮挡问题说明
- iOS15版本的Safari浏览器默认将地址栏固定在视口底部,常规适配方案可添加
padding-bottom: env(safe-area-inset-bottom),保证内容正常显示在地址栏上方。 - 键盘弹出时上述适配方案会失效:此时浮动地址栏会显示在键盘上方,占据视口底部区域,导致部分内容被遮挡在地址栏下方。
- 问题具体表现:在iOS14及更低版本,或是iOS15 Safari手动设置地址栏顶部显示的场景下,文本框聚焦时可以正常看到提交按钮;但使用默认设置的iOS15 Safari中按钮会被遮挡,核心原因是设备返回的视口高度未将浮动地址栏的高度计算在内。
- 最新进展:该问题已在WebKit官方提交bug报告。
内容的提问来源于stack exchange,提问作者Penar
相关产品推荐
相关产品推荐

