android - 为什么我的响应式 CSS 代码在各种设备上的输出很奇怪？

Question

我使用 CSS 已经有一段时间了，但现在我感到困惑了。我有一个响应式就绪(至少我是这么想的)应用程序。

Galaxy S8(分辨率 1440x2960)一切正常(大而易读的文本)；
Nexus 7(分辨率 1200x1920):一切都不好(小而难以阅读的文字)；
Oneplus 3(分辨率 1080x1920):一切正常；

根据我的 CSS 代码，我认为它应该可以在最大 800 像素的宽度下正常工作。在那之上，为什么它适用于 1080px 宽度和 1440 宽度，而不适用于基本上介于两者之间的 1200 宽度？我的 Bootstrap 图标也发生了同样的事情，它们在 1200 宽度上变得非常小，在这种情况下，我的联系表单也只在屏幕的 1/3(高度)上(它应该在高度上的 2/3)。我走错路了吗？

这是我的代码示例:

@media screen and (max-width: 800px){body{font-size:17px}}
@media screen and (max-width: 720px){body{font-size:16px}}

Answer 1

您还必须考虑像素比，您必须将设备分辨率除以该系数才能得到浏览器用来呈现网站的实际分辨率。

Nexus 7 的像素比为 1.325，这意味着 1200 个实际像素在浏览器中呈现为 1200/1.325=905px 宽，对此您指定的媒体查询均未使用。

虽然我找不到三星 S8 或 Oneplus 的像素比率，但基于三星 s7 的像素比率为 4，1440 像素在浏览器中呈现为 1440/4=360px，因此使用了您指定的底部媒体查询.

如果您拥有上述设备，请访问以下链接以确定这些设备的像素比以及渲染分辨率: https://www.mydevice.io/

您可以在此链接中找到像素比率示例: https://mydevice.io/devices/

有关像素比的更多信息: what exactly is device pixel ratio?