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

Question

首先，这不是我在其他问题中看到的缩放问题。此外，我正在使用运行iOS 6的iPhone 4进行测试。在处理移动项目时，我发现了viewport标记和移动版Safari的问题。我把所有东西都提炼成代码，就像我能得到它一样基本。我有参数设置：

• 宽度=设备宽度
• 高度=设备高度
• 初始规模= 1.0
• 最大规模= 1.0
• 用户可扩展=无

一切正常，直到你旋转屏幕。没有任何内容可以调整大小，右侧会出现黑条以填补空白（请参见屏幕截图）。如果我完全删除height=device-height，问题就会消失。但是，我确实需要使用此参数。否则，我将不得不问一个不同的问题。

旋转回纵向模式后，黑条仍然存在，我可以左右滚动。这是一个非常奇怪的问题。删除width=device-width会发生意外情况。如果你想尝试，我在这里有代码：http://toastd.net/viewport.html

以下是一些截图：

这里它在纵向模式下工作正常：

旋转到横向模式时

然后旋转回纵向模式

Answer 1

元标记有助于为视口定义规则，但您仍需要应用视觉样式来解决方向的变化。尝试使用这些CSS值：

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

如果您想要一个很好的资源来帮助继续您的项目，PhoneGap在GitHub上有一个可以分叉的入门应用程序。
PhoneGap Start

Answer 2

我相信这是Safari上的一个错误，但我找到了解决它的方法。它与某些元素及其风格有关。通过消除过程，我将其缩小为几个“冒犯”的HTML元素。从某些元素和CSS样式中删除width: 100%;以及其他静态宽度（如width: 120px;）将开始减少问题。我说“开始减少”，因为右边的边距变小了，但并没有完全消失。然后我开始玩其他CSS属性，如margin和padding。在从一些元素中删除一些左右填充之后，问题终于消失了。但这并不是真的可以接受，因为那些风格是有原因的。

解决方案是将所有内容包装在容器元素中，适当调整大小，并在CSS中设置overflow: hidden;。将overflow: hidden;设置为body或html标签也会起作用，但在Mobile Safari中使用垂直滚动功能可以做到很时髦。在我的例子中，已经存在这样的容器元素，所以我所要做的就是为它添加overflow属性。

就像我说的，我认为这是Safari中的一个错误。当您从横向旋转到纵向时，应将所有内容调整为适合纵向模式。在视觉上，一切看起来都像是正确调整大小。但是，Safari必须认为某些内容没有正确调整大小，因此它显示的页面比实际更宽。这适用于Android设备上的Chrome。我还添加了不同的背景颜色和边框，以突出显示哪个元素可能导致页面超出设备屏幕的宽度。在视觉上，没有明显的罪魁祸首。

如果您认为这可能是width: 100%加padding问题，我也有同样的想法。但是，然后单独删除宽度或边距/填充应该已经解决了问题，但事实并非如此。没有一个元素位于屏幕边缘之外。那里只有空地。