iOS Safari横向滚动改变底部位置

Question

我在ReactJS工作。我在手机上有一个菜单栏，上面有position: fixed和bottom: 0。它位于页面的底部，在除Safari之外的所有浏览器中都是纵向和横向的。

在肖像中，它工作得很好。当您切换到横向时，它位于正确的位置，直到您向下滚动页面。当safari丢弃搜索菜单时，它会将菜单栏推到屏幕下方。对我来说(考虑到菜单栏的位置没有改变)，搜索菜单的下拉似乎将文档的底部移到了屏幕下方。从我所有的搜索来看，我也没有看到任何修复这个问题的方法，似乎这就是Safari的方式。有人有什么建议吗？

下面是相关的组件：https://github.com/Taouen/gobble/blob/master/src/components/MobileBox.js

Answer 1

这可能是您使用vh导致的问题。

IOS上的Safari使用的vh值是屏幕高度的1% (即，无论搜索栏是否显示在顶部，它都是一个固定值)。这是为了在用户向下滚动和搜索栏消失时不会出现“不舒服”的跳转。

请参见示例：https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

它有一个变通方法，您可以使用-- vh，定义为window.innerHeight的百分之一，而不是vh。

(这可能是对原始问题的评论，因为它不是一个完整的、经过测试的答案，但我没有足够的名气来发表评论，抱歉)