iPhone背景颜色不是100％更改

Question

我正在建立一个新网站，当您将鼠标悬停在某物上时，背景颜色会发生变化。例如，我有一个 Twitter 按钮，当你将鼠标悬停在它上面时，背景会变为蓝色背景色。

但是当我在我的 iPhone（它是一个响应式网站）上点击一个图标时，背景只会变为屏幕大小的 100%。如果我向下滚动，背景没有完全改变，我会在底部看到白色背景。

是否有一些 jQuery 代码或插件可以解决问题？

非常感谢！

Answer 1

看起来这是由height:100% 引起的，您在html 和body 元素上使用bottom:0 进行绝对定位。这会强制 body 元素成为屏幕的高度，而不是页面的高度，当您向下滚动时，您实际上是在滚动到这些元素的末尾。

因此，当您更改正文的颜色时，它似乎只适用于屏幕的顶部。这在 Firefox 上似乎不是问题，但我不确定这是否是 webkit 错误 - 它可能只是未定义的行为。

您可以通过删除 html 和 body 元素上的 height:100% 和 position:absolute 来修复它，但是您可能还想删除 top:50% 和 margin-top:-250px 上的容器，因为那将不再起作用。此外，max-width:620px 媒体查询中的容器上还有一个 top:250px，可能必须删除。

现在这显然不会为您提供与初始 CSS 相同的结果，但它确实解决了颜色问题。你需要想出另一种方法来垂直居中你的容器（假设这是你需要的），它不依赖于身体高度为 100%。如果您需要更多帮助，请在 cmets 中告诉我。