如何解决Safari浏览器工具栏遮挡页面底部展示，急

programmer-阿杰 2020-06-11 07:46:08

上面是Safari访问时效果，Safari工具栏遮住页面底部展示，有什么方式可以解决这个问题？跪求大佬协助

...全文

2004 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

敲代码拯救地球 2022-03-14

打赏
举报

回复

解决了吗？

本文介绍了如何处理在iOS设备上，Safari浏览器加载H5页面时，底部工具栏遮挡页面内容的问题。通过使用CSS的calc()函数减去工具栏高度，实现了动态适配，确保页面内容完整显示。同时，代码示例展示了在Vue.js中针对Android和iOS设备的差异化处理。

文章介绍了如何在CSS中使用@media查询针对max-width设置特定样式，以解决在Safari浏览器中内容被底部遮挡的问题，只需为相关div添加特定类名即可解决。,

本文详细介绍了如何使用viewport-fit属性和CSS的env()、constant()函数来处理iOS设备，特别是Safari浏览器中内容被遮挡的问题。viewport-fit控制网页在安全区域内的展示方式，而env()和constant()用于设定安全区域与边界的距离。针对iOS内容被遮挡的两种情况，分别给出了使用100vh和100%高度的解决方案，并强调了兼容性问题。最后，提到了新的视口单位，如lvw、lvh等，但指出其兼容性限制。

本文介绍了在开发H5页面时遇到的一个特定于Safari浏览器的问题，即当设置页面高度为100vh时，底部导航会被遮挡。为了解决这个问题，文章提供了一个React解决方案，通过监听窗口高度变化并动态设置根元素的高度为`window.innerHeight`，确保在Safari中正确适配，避免内容被遮挡。

在iOS设备上使用Safari浏览器时，当地址栏和工具栏显示或隐藏时，页面布局会出现变化。fixed定位能够自适应调整，而absolute定位则不能。这导致部分内容可能被工具栏遮挡或被推挤。

29,040

社区成员

12,459

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章