html - 在 Mobile Safari 中导致旋转问题的视口(viewport)设置

Question

首先，这不是我在其他问题中看到的缩放问题。此外，我正在使用运行 iOS 6 的 iPhone 4 对此进行测试。在处理移动项目时，我发现了 viewport 标记和移动 safari 的问题。我将所有内容提炼成尽可能基本的代码。我在那里设置了参数:

• 宽度=设备宽度
• height=设备高度
• 初始比例=1.0
• 最大比例=1.0
• 用户可扩展性=否

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

旋转回纵向模式后，黑条仍然存在，我可以左右滚动。这是一个很奇怪的问题。删除 width=device-width 会做一些意想不到的事情。如果您想尝试一下，我这里有代码:http://toastd.net/viewport.html

下面是一些截图:

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

当旋转到横向模式时

然后旋转回纵向模式

Answer 1

元标记将有助于定义视口(viewport)规则，但您仍然需要应用视觉样式来解决方向变化。试试这些 CSS 值:

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

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