1

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

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

4

2 回答 2

1

如何将其更改为类似

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />
于 2011-03-02T08:53:40.867 回答
0

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

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

@containerWidth: 1080px;

#page {
    width: @containerWidth;
}

@media screen and (max-width: @containerWidth) {
    #page {
        width: 100%;
    }
}
于 2013-11-26T17:37:32.297 回答