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

Question

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

Answer 1

看一看<meta name="viewport">.它支持各种移动平台,包括(AFAIK)iPhone,Android,Blackberry,Opera Mobile甚至IE6 Mobile.基本上,它允许您预设设备宽度,缩放级别和最大/最小缩放.查看Apple开发人员站点以获取更多信息.

此外,您可以使用CSS媒体查询来检测浏览器的形状和大小,并相应地提供不同的布局(等).同样,这些得到了相当广泛的支持,Apple开发者网站提供了更多信息.

Answer 2

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

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