在 Android 浏览器中显示 HTML，元素大小在 CSS 中指定答案

【问题标题】：Display HTML in Android browser with element sizes specified in CSS在 Android 浏览器中显示 HTML，元素大小在 CSS 中指定
【发布时间】：2013-12-26 10:54:07
【问题描述】：

如何在 Android 浏览器中显示尺寸为 1.5 x 2.5 英寸的元素？让我们考虑下面的 html。

在我的台式计算机上，浏览器在“正常”大小的窗口中，它以 2 行显示内容，每个块的大小为 1.5 x 2.5 英寸，如 html 中所指定。当我将浏览器的窗口缩小时，以对应智能手机的大小，因此每行有一个或两个块，每个块的大小始终为 1.5 x 2.5 英寸。这正是我希望在我的智能手机上也能看到它的方式。

不幸的是，在智能手机（Android 4.0 中默认设置的默认浏览器）上，我看到 2 行内容，每个块的大小约为 0.5 x 0.8 英寸。 IE。它就像正常大小的桌面缩小到一个微小的智能手机屏幕——这不是我想要的。我想查看 CSS 中指定的大小为 1.5 x 2.5 英寸的块。

是否有一些元标记向 android 表明该页面是为移动设备设计的，以便 Android 不会尝试对其进行一些“桌面站点”优化？

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <style>
    div {
        display: inline-block;
        width: 1.5in;
        height: 2.5in;
        background: #AAAAAA;
        margin: 1em 1em;
    }
    </style>
</head>
<body>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
</body>
</html>

【问题讨论】：

标签： android html css

【解决方案1】：

通过将这个指令添加到 head 部分来解决问题：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>

最终我找到了隐藏在这里的答案： Media Query and Android Device 和Media queries not behaving as expected on Android

【讨论】：