在移动浏览器上设置缩放级别

Question

我正在设计移动访问网站，我想设置页面宽度，高度和按钮大小，以便显示填满屏幕。例如，如果用户使用HTC HD，则整个屏幕将为480x800，按钮大小为240x200。 然而，IE移动以及Opera加载一些缩放级别的页面，因此按钮显示太大或太小。如何在javascript中读取当前缩放级别或从javascript设置它？

Answer 1

查看<meta name="viewport">。它支持各种移动平台，包括（AFAIK）iPhone，Android，Blackberry，Opera Mobile甚至IE6 Mobile。基本上，它允许您预设设备宽度，缩放级别和最大/最小缩放。请查看Apple developer site以及更多信息。

此外，您可以使用CSS媒体查询来检测浏览器的形状和大小，并相应地提供不同的布局（等）。同样，这些被广泛支持，Apple developer site有更多信息。

Answer 2

您不应该依赖在移动设备上使用JavaScript，因为它仍然没有得到所有手机的广泛支持。相反，您应该将页面宽度设置为与浏览器宽度相同，这样您的网页就会显示为100％，例如body {width: 100%; margin: 0; padding: 0;}

对于按钮，如果能够在加载页面之前检测浏览器宽度，则应使用相对值或使用不同的图像大小。