在 Android 设备上使用浏览器的元视口标签答案

【问题标题】：using the meta viewport tag for Browser on Android devices在 Android 设备上使用浏览器的元视口标签
【发布时间】：2011-07-07 01:58:49
【问题描述】：

我正在开发一个移动网站，它在移动 Safari 上运行良好。但是，在 Android 设备上，网站被放大太多，但仅在某些设备上。我在我朋友的手机上试过，他有运行 Android 2.1 的 HTC Magic，它显示正常，但在使用 2.1 的模拟器和我的手机（运行 Android 1.5 的摩托罗拉 Backflip）上显示放大太多。知道为什么会出现不一致吗？

链接是：http://itphosting1.com/dtang/jarritos/

这是我正在使用的元视口标签：

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

我认为这可能与设备之间的分辨率和屏幕尺寸差异有关。虽然不太清楚如何解决这个问题......

【问题讨论】：

标签： mobile-website mobile-webkit android-browser

【解决方案1】：

我遇到了类似的问题，但解决方案非常依赖于我正在处理的网站的设置。在 Android 2.2 及更低版本上，该网站无法正确缩放到设备，媒体查询将响应我的缩放 - 缩小、启动更宽的媒体查询、放大并应用宽度更小的媒体查询。

对于一个解决方案，就我所关心的视口元标记而言，使用<meta name="viewport" content="width=device-width, initial-scale=1"> 就足够了。然后我必须考虑的是页面的主容器在 CSS 中设置了明确的宽度。虽然此宽度会响应其他浏览器中视口的宽度，但在这种情况下不会。我可以在 CSS 中保留明确声明的宽度，只要我确保当第一个媒体查询启动时，主容器将设置为 100% 宽度。所以基本上，使用LESS syntax:

@containerWidth: 1080px;

#page {
    width: @containerWidth;
}

@media screen and (max-width: @containerWidth) {
    #page {
        width: 100%;
    }
}

【讨论】：

【解决方案2】：

把它改成类似的东西怎么样

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

【讨论】：

那行不通。我认为这可能与分辨率差异和屏幕尺寸相结合有关，因为它们在 Android 设备之间有所不同。我遇到了这篇博文 (quirksmode.org/blog/archives/2010/09/combining_meta.html)，这可能是我问题的答案，但我真的不明白我会将媒体查询应用于什么。