三星A51设备CSS媒体查询识别物理分辨率而非视口宽度问题咨询

问题原因 #

• 核心原因是你设置的媒体查询存在断点空白区间。三星A51的CSS逻辑宽度约为411px，既不满足你设置的max-width:360px阈值，也达不到min-width:414px的触发条件，会直接应用你写在最外层的全局默认样式，也就是你以为的「大于1000px分辨率才会触发的样式」。
• 次要可能原因：页面存在横向溢出的元素，导致布局视口被撑开到超出设备实际宽度，媒体查询按撑开后的大宽度匹配样式。
• 少见原因：设备系统设置的显示缩放/字体缩放等级过高，或者浏览器自带页面缩放适配功能，改变了实际的CSS视口宽度。

解决方案 #

1. 先确认设备实际视口参数，在页面中加入临时调试代码即可获取：

console.log('逻辑宽度：', window.innerWidth, '设备像素比：', window.devicePixelRatio)

如果打印结果为411/412px，就能确定是断点空白问题。
2. 补全断点空白区间，两种修改方式选其一即可：

• 直接把现有min-width:414px的断点阈值下调到min-width:410px，覆盖三星A51的逻辑宽度
• 新增针对361px~413px区间的媒体查询，写入你需要的移动端样式：

@media screen and (min-width: 361px) and (max-width: 413px) {
  h3{
    font-weight: 500;
    color: pink;
    margin: 2rem auto 1rem;
    font-size: 1.5rem;
  }
}

3. 排查页面溢出问题，给根元素加样式避免视口被撑开：

html, body {
  overflow-x: hidden;
}

4. 可优化viewport标签，添加全面屏适配参数：

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

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