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

我正在开发一个移动网站，它在移动Safari上效果很好。但是，在Android设备上，网站放大得太多，但仅限于某些设备。我在我的朋友的手机上试了一下，他的HTC Magic运行的是Android 2.1，并且它显示正常，但是它显示在模拟器上使用2.1和我的手机（运行Android 1.5的摩托罗拉Backflip放大了太多）。任何想法为什么有不一致？在Android设备上使用浏览器的元视口标记

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

这是我使用的中继检视区标记：

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

我认为这可能与设备之间的分辨率和屏幕尺寸上的差异有关。真的不知道如何解决，虽然...

来源

2011-03-02 skaterdav85

如何将其更改为类似

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

来源

2011-03-02 08:53:40 nLL

这没有奏效。我认为这可能与分辨率差异和屏幕尺寸的组合有关，因为它们在Android设备之间有所不同。我遇到了这个博客文章（http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html），这可能是我的问题的答案，但我真的不明白我应该怎么做媒体查询。 – skaterdav85 2011-03-06 07:14:14

我也有类似的问题，但解决方案是非常依赖于网站的我的工作设置上。在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%; 
    } 
}

来源

2013-11-26 17:37:32 fredrikekelund

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

回答

相关问题