1



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

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

然后我使用了如下所示的视口元标记：

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

在阅读了有关此主题的Apple 文档和Android文档后，我了解到移动浏览器首先在视口元标记定义的更大区域中呈现网页，然后将其缩小以匹配设备宽度。

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

如何解释这种行为？

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

4

1 回答 1

1

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

具体来说：

计算默认初始比例以适应视口大小中的网页。因为默认视口宽度为 800 像素，如果设备屏幕分辨率小于 800 像素宽，则默认情况下初始比例小于 1.0，以适应屏幕上 800 像素宽的页面。

如果您将初始比例设置为 2，页面将被放大。如果您将其设置为 0.5，您将被缩小。min 和 max 也可以覆盖这些属性

于 2013-02-15T20:01:24.990 回答