iPhone Safari不会自动缩小纵向 - >横向 - >纵向

Question

我有一个非常简单的HTML页面,其中包含适用于iPhone的META标记:

<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,user-scalable=no" />

使用iPhone Safari,当页面以纵向模式加载时,它看起来很好,宽度适合屏幕.当我将iPhone旋转到横向模式时,网页会自动调整大小以适应横向宽度.好,这就是我想要的.

但是当我从横向旋转回来时,页面不会像以前一样调整回适合纵向宽度.它仍然在景观宽度.

我希望iPhone能够自动将其设置回正确的宽度,就像横向模式一样.我不认为这应该涉及方向监听器,因为它全部是自动完成的,我没有任何特殊的样式用于不同的模式.

为什么iPhone不以纵向模式重新调整网页大小？我该如何解决？

UPDATE

我设法让iPhone自动调整大小,但有一个奇怪的现象,只有在偶数次旋转之后这样做...非常非常奇怪.
我使用这个META标签:

<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

以下是我必须做的事情才能使其自动调整大小:
1.纵向加载 - >看起来不错.
2.旋转到横向 - >调整大小以适合屏幕.
3.向后旋转至纵向 - >不调整大小.
4.旋转到横向 - >仍然适合景观.
5.旋转至纵向 - >调整大小以适合纵向屏幕.

有人可以解释这种行为吗？
我仍然想知道如何解决这个问题,并感谢任何帮助.

谢谢!
汤姆.

Answer 1

这必须是iOS 4 Safari中的一个错误.以下是我对以下元标记的行为(第二个标记是全屏显示):

<meta name="viewport" content="user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

从纵向移动到横向时,页面将正确缩放,直到我使用弹出键盘在字段中输入值 - 然后它将停止缩放.这意味着如果我在风景中使用键盘,当我去画像时它会太大,反之亦然.

使用以下元标记切换修复它...感谢此页面上的其他答案.

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

Answer 2

我在 3GS 3.1.3 上遇到了同样的问题，尽管在横向模式后我无法让它再次变成正确的尺寸。但是当我删除“height=device-height”时，页面每次都会正确缩小。所以我的元看起来像这样：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

我希望能够使用 height 属性来锁定高度，但似乎它们混合得不太好。