CSS媒体查询适配问题：移动端样式未正常生效如何解决？

你的三星手机显示绿色而非蓝色，是因为部分安卓触屏设备（包括部分三星机型）的浏览器会报告hover: hover（比如支持外接鼠标、触控笔，或系统模拟hover行为），导致第一个桌面端媒体查询(hover: hover) and (max-height: 999px)被命中，而非预期的移动端(hover: none)规则。

结合pointer媒体特性来更精准区分设备类型——触屏设备的主输入指针通常是coarse（手指这类粗指针），桌面设备则是fine（鼠标、触控板这类精细指针）。调整后的代码如下：

/* 高分辨率桌面设备：精准指针 + 屏幕高度≥1000px */
@media (pointer: fine) and (min-height: 1000px) { 
    div {background: red;}
}

/* 低分辨率桌面设备：精准指针 + 屏幕高度<1000px */
@media (pointer: fine) and (max-height: 999px) {
    div {background: green;}
}

/* 移动端设备：粗指针（触屏）或不支持hover的设备 */
@media (pointer: coarse), (hover: none) {
    div {background: blue;}
}

• pointer: fine：仅匹配使用精准输入设备的桌面端，避免误判支持hover的触屏设备。
• pointer: coarse：直接命中手指操作的触屏设备，加上(hover: none)作为兜底，覆盖所有不支持hover的设备。
• 媒体查询逻辑互斥，确保不同设备只会命中对应规则，不会出现样式冲突。

内容的提问来源于stack exchange，提问作者frenchie