html - 如何考虑使用@media 的大多数手机屏幕？

Question

我使用 Cordova 制作了一个应用程序，但在尝试使它在大多数移动屏幕上看起来相同时遇到了 CSS 方面的一些困难。

某处我了解到我开始为每个测试设备(XIAOMI Redmi Note 3、XIAOMI Redmi 3S、Huawei ATH-UL01、Huawei KII-L21)编写 @media 查询。

第一个问题是

@media screen and (device-width: 360px) and (min-device-height: 540px) and (-webkit-device-pixel-ratio: 3) {
}

对于 XIAOMI Redmi Note 3 是好的，但对于 Huawei ATH-UL01 是坏的，尽管它们的特性(设备宽度:360px 和像素比)是相等的!也许还有其他东西，我没有在 @media 中描述？

第二个问题是，我认为为每个设备编写 @media 是不正确的方法。让应用程序在大多数设备上看起来不错的正确方法是什么？什么是好的做法？

font-size 和 line-height 在不同的屏幕上看起来大多不同。如何避免？也许我应该使用 em？现在我正在使用 px。

Answer 1

简短的回答:仅以宽度为目标并一视同仁。

在移动设备上，情况会有所不同。您特别提到了 font-size 和 line-height。这些看起来会有所不同，因为物理 dpi(每英寸点数)或 ppi(每英寸像素数)不同。

这有点让人困惑，因为移动设备(尤其是那些具有非常高的 dpi 的设备)在移动设备上模拟了 ppi。一部 iPhone 可能有 1000 像素，但呈现给浏览器时就好像它有大约 640 像素一样。这些不一定对应于设备的物理尺寸。

这意味着在一部手机上，16px 在现实世界中可能是 1/4"，而在另一部手机上可能是 1/6"或 1/2"。

所有这一切基本上意味着您永远不会得到看起来完全相同的东西。您最好的方法是只针对设备的宽度，同时查看几个设备并找到“足够好”的东西。然后，对于任何异常值，您可以更具体地定位它们以修复小问题。

如果您试图让每个设备看起来都一样，您会把自己逼疯的。这是不可能的。