iOS9移动Safari横屏模式下使用position:absolute bottom:0时存在CSS错误。

Question

我似乎找不到解决方法。

在iOS9的移动版Safari中，如果一个Web应用程序使用position:absolute和bottom:0来覆盖整个屏幕的内容区域，当处于横屏模式时，Safari导航栏将覆盖内容底部，您无法通过它滚动-在竖屏时不会发生此情况。

1. 竖屏模式正常，即使导航栏存在也是如此
2. 不是方向更改错误，如果页面从横向开始，则会发生
3. 如果将网页添加到主屏幕，则不会发生错误，在横向上工作得很好并且内容可见（因为导航栏不存在）

那么为什么Safari在竖屏下可以正确地使用bottom:0，而在横屏下不能呢？

- ck_

---

真不敢相信还没有人遇到这个问题 - 老好了的Safari！ - Joseph Woodward

Answer 1

在 html 元素上设置 position:fixed 可以神奇地解决这个问题。

html { position:fixed; width:100%; height:100%; overflow:hidden; }

不确定为什么，但肯定是一个渲染 bug，fixed 可以解决它。

由于某种原因，fixed 也会改变横向的字体大小，但我也可以解决这个问题。

- ck_

---

那对我和我们的情况有效。尽管它可能不适用于其他人。 - NielsH

很棒的解决方案！我被卡在这个问题上几个小时了。 - gMirian

Answer 2

我曾经遇到同样的问题，当屏幕方向改变为 横屏 模式时，请将您的 viewport 元标签更改为:

width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no

我会通过简单地查找$('meta[name="viewport"]')并替换其中的content来实现这个功能。

- vxda