iphone - 手机网站 : Orientation change from portrait to horizontal

Question

我正在为 iPhone 和 Android 浏览器开发一个移动网站。

当我摆弄 Iphone 4 和 HTC Desire 时，我发现这两种设备对方向变化的 react 不同。如果我以纵向模式加载网站，然后将设备旋转到水平模式，Iphone 会使用相同的宽度 (320px) 放大到更接近内容。对于 Android 设备，如果我旋转，视口(viewport)似乎会发生变化，因此不会进行任何缩放(宽度 >320 像素)，网站反而会变宽。

我当前的视口(viewport)(我已经尝试将固定宽度设置为 320 像素):

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

现在我的问题是:有没有办法让 Android Webkit 浏览器在方向从纵向变为水平时像 iPhone 一样“放大”？

非常感谢您!

安德鲁

Answer 1

由于视口(viewport)的工作方式，此功能在 iPhone 上存在。以下是如何在所有设备上禁用它，从而创建相同的用户体验。

如果您将视口(viewport)设置为:

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

然后它将阻止 iPhone“重新缩放”回设备宽度。不过，这也会完全禁用缩放。目前没有更好的解决方案。