如何让PC桌面端忽略移动端横屏@media CSS样式？

你的媒体查询会被部分带触摸屏的PC设备（比如翻转成横屏的触控笔记本）误触发——这类设备同时满足hover: none（触控操作无悬停）和pointer: coarse（粗指针即触摸输入），所以会错误应用移动端样式。可以用以下纯CSS方案修正：

方法一：添加最大宽度限制 #

给媒体查询加上宽度阈值，限定仅在窄屏设备（对应移动端横屏的宽度范围）触发：

@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  // 你的样式代码
}

1024px是通用阈值，你可以根据实际需求调整（比如改成992px），桌面设备横屏宽度通常远大于这个值，会自动忽略该样式块。

方法二：结合设备像素比筛选 #

针对iOS和大部分安卓设备，可添加设备像素比条件进一步区分移动设备：

@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (-webkit-min-device-pixel-ratio: 1.5) {
  // 你的样式代码
}

移动设备的像素比普遍高于桌面设备，这个条件能更精准地排除桌面触控设备。

如果需要极致精准，也可以通过JS检测设备类型，给body添加is-mobile类，再结合媒体查询编写样式，但纯CSS方案已经能覆盖绝大多数场景。

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