好的所以有问题的网站是这样的:
现在,如果您在此网站上注意到,白色背景 div 的分辨率为 445px,长度为 686px。它也是流动的,所以如果你缩小它,它会显得不同以适应不同的尺寸。(如果您使用的是宽度小于 400px 的手机,它实际上会显示不同的图像)。
好的,但关键是这个页面在 android 设备上显示不正确,如下所示。
该手机以及该预览器中的所有其他 480 像素 x 800 像素的手机正在显示这样的网站。如果您点击它,您会看到该网站的最大高度为 686 像素,那么为什么该移动设备上没有显示整个页面呢?
这个“playplanet”标志的大小实际上是 180 像素宽,几乎填满了整个宽度,而该手机的宽度应该是 480 像素宽。
我在这里错过了什么吗?
如果您查看源代码,您会看到我添加了以下元标记:
<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),但实际上如果你看截图,它实际上显示为一半大小,因为徽标只有 180 像素,几乎填满了整个屏幕。
它应该完全适合那里。有趣的是,我的宽度小于 400 像素的布局在较小的功能手机尺寸(240 x 320 或反之亦然)上完美运行,但这个更大的布局给我带来了问题。