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

Question

我正在开发一个移动网站，它在移动 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" />

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

Answer 1

把它改成类似的怎么样

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

Answer 2

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

对于解决方案，就我而言，使用 就足够了。然后我必须考虑的是页面的主容器在 CSS 中设置了明确的宽度。虽然此宽度会响应其他浏览器中视口的宽度，但在本例中不会。我可以在 CSS 中保留显式声明的宽度，只要我确保当第一个媒体查询启动时，主容器将设置为 100% 宽度。基本上，使用 LESS 语法：

@containerWidth: 1080px;

#page {
    width: @containerWidth;
}

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