移动Safari中的视口设置导致旋转问题

Question

首先，这不是我在其他问题中看到的缩放问题。此外，我正在使用运行iOS 6的iPhone 4进行测试。在开发移动项目时，我发现了一个与viewport标签和移动Safari有关的问题。我将所有内容都简化为最基本的代码。我设置了以下三个参数:

• width=device-width
• height=device-height
• initial-scale=1.0
• maximum-scale=1.0
• user-scalable=no

一切都很正常，直到你旋转屏幕。什么都没有被调整大小，右侧出现了黑色条纹来填补空白（请参见截图）。如果我完全删除height=device-height，问题就会消失。但是，我确实需要使用此参数。否则，我将不得不提出另一个问题。

在旋转回纵向模式后，黑色条仍然存在，我可以左右滚动。这是一个非常奇怪的问题。删除width=device-width会产生意想不到的结果。如果您想尝试，请在此处查看代码：http://toastd.net/viewport.html 以下是一些屏幕截图：

在纵向模式下工作正常： 旋转到横向模式时： 然后旋转回纵向模式：

- mayonaise

Answer 1

我认为这是Safari的一个bug，但我找到了一种解决方法。它与某些元素及其样式有关。通过逐个排除法，我将其缩小到了几个“有问题”的HTML元素。从某些元素和CSS样式中删除width: 100%;以及其他静态宽度，如width: 120px;，可以开始减少问题。我说“开始减少”，因为右侧的边距变小了，但并没有完全消失。然后我开始尝试其他CSS属性，如margin和padding。从某些元素中去掉一些左右padding后，问题终于解决了。但这并不是真正可接受的，因为这些样式是有原因的。

解决方案是将所有内容包装在一个容器元素中，适当调整大小，并在CSS中设置overflow: hidden;。将overflow: hidden;设置为或标签也可以起作用，但在移动版Safari中会出现奇怪的垂直滚动。在我的情况下，已经有这样一个容器元素，所以我只需要添加overflow属性即可。

就像我说的，我认为这是Safari中的一个错误。当你从横屏模式旋转到竖屏模式时，所有东西都应该被重新调整大小以适应竖屏模式。从视觉上看，一切似乎都已经被正确地调整了大小。然而，Safari可能认为某些东西没有被正确地调整大小，因此它显示的页面比实际宽度要宽。在Android设备上的Chrome中，这个功能完全正常。我还添加了不同的背景颜色和边框来突出显示哪个元素可能导致页面超出设备屏幕的宽度。从视觉上看，没有明显的罪犯。

如果你认为这可能是一个width: 100%加上padding的问题，我也有同样的想法。但是删除宽度或者单独删除边距/填充应该可以解决这个问题，但事实并非如此。没有一个元素坐落在屏幕的边缘之外。那里只有空白的空间。

- mayonaise

---

我还从“视口”“元”标签中删除了height=device-height，因为它与移动版Safari不兼容。 - mayonaise

Answer 2

标签可以帮助定义视口的规则，但您仍然需要应用视觉样式来处理方向的变化。尝试使用以下CSS值：

body { width: 100%; height: 100%; }

如果您需要一个好的资源来帮助继续您的项目，PhoneGap在GitHub上有一个起始应用程序，您可以fork它。
PhoneGap Start

- theaccordance

---

谢谢你的建议，但在这种情况下设置宽度并不能解决问题。 - mayonaise