7

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

现在,如果您在此网站上注意到,白色背景 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 或反之亦然)上完美运行,但这个更大的布局给我带来了问题。

4

2 回答 2

13

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

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

此外,在元视口介绍中,“设置目标密度”部分下方的示例看起来像您的情况。

这是更新的元数据:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, target-densityDpi=device-dpi">
于 2012-09-18T20:44:01.717 回答
1

您正在查看的屏幕截图有缺陷。它以 240 像素 x 400 像素的分辨率显示您的网站,这是许多标准 LG 和三星智能手机的典型分辨率。Galaxy [正如你所指出的]显然具有更高的分辨率。我的建议是将错误报告给您正在使用的服务,在他们纠正之前,尝试使用另一部类似的手机进行测试。任何其他具有正确分辨率的 android 手机都应该可以工作,因为每个 android 设备的网页显示几乎相同,没有分辨率和方向。

于 2012-09-24T21:39:47.413 回答