iPhone 4 的视口问题

Question

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

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

<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;
}

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

仅供参考：我搜索并找到了this 和this，它们几乎都在问同样的问题。但他们都几个月大了，而且都没有真正解决这个问题，所以我希望有人在此期间想出一些办法。

Answer 1

为了避免在方向改变时重新缩放尝试

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

并根据您的需要调整宽度。如果这在android上不能正常工作，你可以通过PHP+user agent检测发送不同的viewport标签，或者通过javascript在设备上设置。

Answer 2

将视口更改为：

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