iPhone 4与视口问题

我问了一个question并收到了关于为移动浏览器调整图像大小的答案。iPhone 4与视口问题

提供的答案适用于嵌入式图像。不过，我也需要使用背景图片作为标题的一部分。他们通过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，这几乎都是问同样的问题。但他们都有几个月的历史，并且对这个问题都没有真正的答案，所以我希望有人在这个过渡时期提出了一些事情。

来源

2011-02-07 EmmyS

-2

更改视口：

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

来源

2011-02-07 18:47:07 kohlehydrat

我无法在视口元标记中找到任何支持“selfrender”作为初始缩放比例的有效值的文档。你能告诉我在哪里写的？ – EmmyS 2011-02-07 18:53:16

避免缩放时方向的变化尝试

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

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

来源

2012-01-02 20:55:44 babca

iPhone 4与视口问题

回答

相关问题