4

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

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

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

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

以下是一些截图：

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

旋转到横向模式时 不能在横向模式下工作

然后旋转回纵向模式 旋转回纵向模式

4

2 回答 2

0

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

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

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

于 2013-02-19T15:25:58.947 回答
0

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

解决方案是将所有内容包装在一个容器元素中，适当调整大小并overflow: hidden;在 CSS 中设置。设置overflow: hidden;为bodyorhtml标签也可以，但在 Mobile Safari 中垂直滚动时会做一些时髦的事情。在我的例子中，已经有这样一个容器元素，所以我所要做的就是overflow向它添加属性。

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

如果您认为这可能是一个width: 100%加padding号问题，我也有同样的想法。但是单独删除宽度或边距/填充应该可以解决问题，但它没有。没有一个元素位于屏幕边缘之外。那里除了空地什么都没有。

于 2013-09-18T02:05:44.133 回答