iPhone 4 的视口(viewport)问题

Question

我问了question并收到了有关移动浏览器图像大小的答复。

提供的答案适用于内联图像。但是，我还需要使用背景图像作为标题的一部分。它们是通过 css 类设置的。在 Android 上，它们在纵向和横向上都能正确缩放，但在 iPhone 上，当从纵向转向横向时，它们会自动放大。这是个问题。我有一个像这样设置的视口(viewport)标签:

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

显然，当 iPhone(至少是最新版本)切换到横向模式时，它会重新缩放并放大得非常大，而不是仅仅多次重复背景以适应更宽的屏幕。

这是我的代码:

<tr><td colspan="2" class="logoHeader"><img src="/images/mobile/logoCopy.png" /></td></tr>

其中类 logoHeader 如下所示:

td.logoHeader {
  background: url(/images/mobile/transparentLeavesRight.png) top right no-repeat, 
            url(/images/mobile/transparentLeavesGradient.png) top left repeat-x;
  text-align:center;
}

有什么想法吗？我知道我可以添加视口(viewport)元的用户可缩放属性，但我们不想阻止用户在必要时手动缩放。我们只是想防止它在手机变成横向模式时自动缩放。

仅供引用:我搜索并发现this和 this ，它们几乎在问同样的问题。但他们都已经几个月了，而且都没有解决问题的实际答案，所以我希望有人能在过渡期间想出一些办法。

Answer 1

为避免方向改变时重新缩放，请尝试

<meta name='viewport' content='width=1024' />

并根据您的需要调整宽度。如果这在 Android 上无法正常工作，您可以随时通过 PHP+用户代理检测发送不同的视口(viewport)标签，或通过 javascript 在设备上设置它。