CSS：无论移动设备的 DPI 如何，都使 div 正好 300 像素高？

Question

关于从移动设备和 DPI 的角度理解网页设计，我正在进入一个困难时期。

之前我只是用来创建 300 像素高，例如 div 它总是 300 像素高并且在所有设备上看起来都一样，因为显示器实际上总是有相同的 dpi。所以 300 像素 = 300 像素等等

现在移动设备已经到来（前一阵子到来:-)，但我还没能理解 css 和像素。

据了解我有一个 div 300 像素高，我如何确保它在具有不同 DPI 的不同移动设备上看起来大小相同（至少在高度方面）？

这是自动使用视口元标记完成的吗？或者这与它无关？

没有自动过程吗，我需要使用某种实时调整大小吗？我听说 CSS 像素，但不确定这是否与它有关，或者我是否能够使用它。

Answer 1

如果您在 html 中使用这样的元标记：

<meta name="viewport" content="height=device-height, initial-scale=1.0">

你的 div 的 css 看起来像这样：

div {
   height:300px;
}

那么你的 div 在所有设备上都应该是 300px 高。

请记住，台式机和移动设备的 DPI 截然不同，因此台式机上的 300 像素高 div 与 300 像素高 div 的真实世界尺寸不同iPhone.

您还可以考虑放弃使用像素，而在指定元素的尺寸时使用百分比。百分比在设备之间的移动比像素更容易。

您还可以使用媒体查询为您的元素指定不同的像素大小，具体取决于设备的尺寸。参见：Media queries at w3schools

为了验证这一点，我创建了一个 html 页面，如下所示：

    <html>
        <head>
        <meta name="viewport" content="height=device-height, initial-scale=1.0">
        <style>
            .sample-fixed {
                border: 2px solid purple;
                width: 100px;
                height: 100px;
                position: absolute;
            }
            .sample-percentage {
                border: 2px solid green;
                width: 100%;
                height: 100%;
            }
        </style>
        </head>
        <body>
            <div class="sample-fixed">
            </div>
            <div class="sample-percentage">
            </div>
        </body>
    </html>

然后我将页面加载到 Chrome。我启动了 Chrome 的 Developer Tools（在 Chrome[=51= 中按 F12 ]).然后单击控件 切换设备工具栏（红圈）。

在地址栏下方，浏览器现在有一个可以更改设备格式的菜单。我确保 scale 设置为 100%，然后尝试了不同的设备模拟器。

紫色方框总是出现相同的像素数（100x100，参见sample-fixed css class 定义）。我测试了纵向和横向。（我偶尔不得不将 scale 改回 100%，因为开发人员工具会为我选择一个新值。）

测试显然取决于 Developer Tools 模拟器的准确性和我的视力。

CSS：无论移动设备的 DPI 如何，都使 div 正好 300 像素高？

CSS: Making a div exactly 300 pixels high regardless of DPI of mobile device?

css

mobile

sass

media-queries