CSS 媒体查询解释分辨率而不是视口

Question

我制作了一个 HTML 页面和一个 CSS 文件。我创建了媒体查询以在不同的设备上正确显示此页面。

一切都很好，除了三星 A51 (android)。此移动设备将 CSS 媒体查询解释为分辨率 > 1000 像素，而不是将媒体查询解释为分辨率 = 414px。

正如您在本网站上看到的，三星 A51 的分辨率为 1080x2400 和 405PPI：https://phonesdata.com/fr/smartphones/samsung/galaxy-a51-5458463/#techspec

我不明白为什么。但是我清楚地指出了元标记：

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

这是解释的 CSS：

h3 {
    max-width: 70%;
    text-align: center;
    font-weight: 800;
    color: #13A538;
    margin: 5rem auto 1rem;
    font-size: 2.5rem;
    margin-bottom: 30px;
}

这里是应该解释的媒体查询：

@media screen and (min-width: 414px) {
            h3{
                font-weight: 500;
                /* color: #13A538; */
                color: pink;
                margin: 2rem auto 1rem;
                font-size: 1.5rem;
            }

编辑：我的断点：

@media screen and (max-width: 360px)
@media screen and (min-width: 414px)
@media (min-width: 576px)
@media (min-width: 768px)
@media (min-width: 992px)
@media (min-width: 1200px)

@Greg-- 你认为有必要添加你的媒体查询吗？

Answer 1

Samsung A51 的视口大小为 412x915px，将媒体查询更改为：

@media screen and (min-width:320px) {
        h3{
            font-weight: 500;
            /* color: #13A538; */
            color: pink;
            margin: 2rem auto 1rem;
            font-size: 1.5rem;
        }
}

320px - 几乎是所有设备的最小值，但最好使用 max-width

如何计算视口：

三星 A51 分辨率：1080x2400px

密度：2.625（分辨率 405px/inch 到视口 154px/inch）

视口：

• 宽度：1080/2.625=411,4px
• 高度：2400/2.625 = 914.2px

UPD

这个三星仍然显示这个媒体查询：@media (min-width: 1200 像素）

请在三星手机上使用 check 和 check

请尝试检查不同的移动浏览器（三星浏览器和 Chrome） - 是否有相同的问题？

为了检测您可以使用的移动设备：

• @media only screen and (hover: none) and (pointer: coarse) - 用于检测触摸屏 link;
• orientation: portrait - link;