我目前正在开发一个旨在在iPad上展示最佳的网站，但必须在大多数移动浏览器上都能很好地显示。
我将css的宽度设置为2048像素，这是横向模式下iPad 3的像素宽度。
然后我使用了如下所示的视口元标记：
<meta name="viewport" content="width=2048" />
在阅读了有关此主题的Apple documentation和Android one之后，我了解到移动浏览器首先在由视口元标记定义的更大区域中呈现网页，然后将其缩小匹配设备宽度。
这在iPad 2上非常有效，但iPhone，iPhone Retina和Galaxy Nexus的宽度都会溢出。我没有机会在iPad 3上测试网站。
如何解释这种行为？
如果要在此问题上添加任何详细信息，请告知我们 在此先感谢您的帮助。
答案 0 :(得分：1)
通读http://developer.android.com/guide/webapps/targeting.html#ViewportScale 诀窍是找出设备宽度和视口比例之间的平衡。
具体做法是：
计算默认初始比例以适合视口大小的网页。由于默认视口宽度为800像素，如果设备屏幕分辨率小于800像素宽，则默认情况下初始比例小于1.0，以便在屏幕上适合800像素宽的页面。
如果将初始比例设置为2，则页面将被放大。如果将其设置为.5，则将缩小。最小值和最大值也可以覆盖这些属性