3

我问了一个问题并收到了关于移动浏览器调整图像大小的答案。

提供的答案适用于内联图像。但是，我也需要使用背景图像作为标题的一部分。它们是通过 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，它们几乎都在问同样的问题。但他们都几个月大了，而且都没有真正解决这个问题，所以我希望有人在此期间想出一些东西。

4

2 回答 2

0

避免在方向更改时重新缩放尝试

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

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

于 2012-01-02T20:55:44.390 回答
-2

将视口更改为：

<meta name="viewport" content="width=device-width, initial-scale="selfrender"/>
于 2011-02-07T18:47:07.110 回答