移动端横屏时@media媒体查询控制Header显示异常问题

嘿，我来帮你捋捋这个横屏适配的小问题～

问题根源 #

你遇到的情况其实很典型：手机竖屏时宽度通常在375px-414px之间，刚好符合max-width:767px的媒体查询条件，所以.mobcat会被隐藏；但当手机横屏后，设备的视口宽度会大幅增加（比如iPhone 14横屏宽度能到852px），直接超过了767px的阈值，这时候你的媒体查询就不再生效了，.mobcat会回到它的默认显示状态（大概率是display:block），所以就意外冒出来了。

另外要先确认你有没有设置正确的视口元标签——这是移动端适配的基础，如果没加这个，浏览器可能会用桌面端的视口宽度来渲染，也会导致媒体查询判断混乱：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

解决方案 #

根据你的需求，这里给你两种实用的处理思路：

思路1：基于屏幕宽度适配（推荐）

如果你的核心需求是「小屏幕显示移动端Header，大屏幕（包括手机横屏）显示桌面端Header」，可以调整CSS的默认样式和媒体查询逻辑：

/* 默认状态：桌面端/大屏幕隐藏移动端Header */
.mobcat {
  display: none;
}

/* 小屏幕（宽度≤767px，包括竖屏手机、窄宽度横屏手机）显示移动端Header */
@media only screen and (max-width:767px) {
  .mobcat {
    display: block; /* 换成你实际需要的display值，比如flex */
  }
}

这样不管手机是竖屏还是窄宽度横屏，只要宽度在767px以内，都会显示移动端Header；一旦宽度超过，就自动切换到桌面端Header。

思路2：结合屏幕方向严格控制

如果想强制「竖屏显示移动端Header，横屏不管宽度都显示桌面端Header」，可以结合orientation媒体特性：

/* 默认隐藏移动端Header */
.mobcat {
  display: none;
}

/* 竖屏且宽度≤767px时，显示移动端Header */
@media only screen and (max-width:767px) and (orientation: portrait) {
  .mobcat {
    display: block;
  }
}

/* 所有横屏状态下，强制隐藏移动端Header */
@media only screen and (orientation: landscape) {
  .mobcat {
    display: none;
  }
}

这种方式更严格，但要注意部分平板竖屏宽度可能超过767px，需要根据你的实际适配范围调整阈值。

调试小技巧 #

可以用浏览器开发者工具的「设备模拟」功能，实时切换横竖屏状态，查看元素的显示变化，调试起来会更高效哦～

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