Question

我正在开发一个移动网站，它在移动Safari上运行良好。但是，在Android设备上，网站放大了太多，但只在某些设备上放大。我在我朋友的手机上试了一下，他有HTC Magic运行的Android 2.1它显示确定，但它在模拟器上显示放大太多使用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及更低版本中，该网站无法正确扩展到设备，媒体查询将响应我的缩放 - 缩小，更宽的媒体查询启动，放大，以及应用的宽度较小的媒体查询。 / p>

对于解决方案，就视口元标记而言，使用<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%;
    }
}

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

2 个答案: