不能使视口元标记工作

Question

我目前正在开发一个网站，旨在显示在iPad上最好的，但必须在大多数移动浏览器上很好地显示。

我基于宽度为2048px的CSS，这是iPad 3在横向模式下的像素宽度。

然后我用视窗meta标签的下面写：

<meta name="viewport" content="width=2048" /> 

读了Apple documentation和Android one关于这个话题，我被弄得明白，移动浏览器首先呈现在一个较大的区域中的网页由视口元标记定义，然后将其缩小以匹配设备宽度。

这在iPad 2上效果很好，但宽度在iPhone，iPhone Retina和Galaxy Nexus上溢出。我没有机会在iPad 3上测试该网站。

这种行为如何解释？

如果在这个问题上有任何细节要添加，请让我知道。
在此先感谢您的帮助。

Answer 1

通过http://developer.android.com/guide/webapps/targeting.html#ViewportScale阅读 诀窍是弄清楚设备宽度和您的视口比例之间的平衡。

具体来说：

默认初始规模计算在视口中大小以适合的网页。由于默认视口宽度为800像素，因此如果设备屏幕分辨率小于800像素宽，默认情况下，初始缩放比1.0小，以便在屏幕上显示800像素宽的页面。

如果将初​​始缩放比例设置为2，则页面将被放大。如果将其设置为.5，则会缩小。最小和最大也可以覆盖这些属性