为什么即使使用视口/媒体查询,我的页面也无法在Android上以正确的大小显示？

Question

好的,所以有问题的网站是这样的:

现在,如果您在本网站上发现,白色背景div的分辨率为446px,横跨y 686px长.它也是流动的,所以如果你收缩它,它会显得不同,以适应不同的尺寸.(如果你的手机宽度小于400px,它实际上会显示不同的图像).

好的,但关键在于此页面未在Android设备上显示,如下所示.

该手机以及该预览器中480px x 800px的所有其他手机都在显示这样的网站.如果您点击它,您可以看到该网站的最大高度为686px,那么为什么这个移动设备上显示的整个页面都没有？

这个"playplanet"徽标的大小实际上是180px横跨它几乎填满了整个宽度,并且该手机的宽度被支持为480px横跨.

我在这里错过了什么吗？

如果您查看源代码,您会看到我添加了以下元标记:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

这些应该告诉Android浏览器将页面显示为设备的实际宽度,所以应该告诉它将其显示为480px X 800px(三星galaxy s 2是480px X 800px),但实际上如果你看一下屏幕截图,实际上它显示为HALF那个尺寸,因为徽标只有180px而且它几乎填满了整个屏幕.

它应该完美地适合那里.有趣的是,我的小于400px的宽度布局完美适用于较小的功能手机尺寸(240 x 320或反之亦然),但这个更大的一个导致我的问题.

Answer 1

你试过target-densityDpi=device-dpi吗？

引用本文:Android团队已实现自定义元视口属性,允许您自定义高分辨率(HDPI)屏幕的浏览器缩放.CSS"px"单元可能与设备的实际像素不同,因为浏览器将图像和字体"缩放"到比您请求的更大的尺寸.更糟糕的是,它使用非整数缩放因子(例如1.5倍缩放,缩放320px到480px),这使得图像看起来非常奇怪.

此外,在对元视口的介绍中, "设置目标密度"部分下面的示例与您的情况类似.

这是更新的元数据:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, target-densityDpi=device-dpi">