Galaxy S8 Plus横屏Media Query适配问题：误触发桌面端样式求助

嘿，我太懂你这个烦恼了——你写的横屏媒体查询之所以会命中1920*1200的桌面设备，核心原因就是桌面设备的宽度本身就远大于740px，而且默认就是横屏状态，所以完全符合你写的两个条件。要解决这个问题，关键是给查询加一些「只针对移动触摸设备」的过滤条件，下面给你几个实用的方案：

方案一：用触摸设备特征过滤（最推荐） #

桌面设备的输入方式是鼠标（精细指针），而手机是触摸（粗糙指针），我们可以用(pointer: coarse)这个媒体特性来精准区分：

@media only screen and (min-width: 740px) and (orientation: landscape) and (pointer: coarse) {
  /* 这里写你Galaxy S8+横屏的专属样式 */
}

这个条件会确保只有触摸类移动设备才会触发，完美避开桌面设备。如果想更保险，还可以加上Galaxy S8+横屏的最大逻辑宽度（大概在900px以内），进一步缩小范围：

@media only screen and (min-width: 740px) and (max-width: 900px) and (orientation: landscape) and (pointer: coarse) {
  /* 你的样式 */
}

方案二：结合设备像素比（DPR） #

Galaxy S8+的设备像素比是3，而大部分桌面设备的DPR是1或2（Retina屏），我们可以用这个特性来辅助过滤：

@media only screen and (min-width: 740px) and (orientation: landscape) and (min-device-pixel-ratio: 2.5) {
  /* 你的样式 */
}

不过这个不是100%绝对（比如有些高端桌面屏DPR也能到3），建议和方案一结合使用。

方案三：利用宽高比区分 #

手机横屏的宽高比通常比桌面更修长，Galaxy S8+是18.5:9（约2.05），而桌面常见的是16:9（约1.77）或4:3（约1.33），我们可以通过min-aspect-ratio来筛选：

@media only screen and (min-width: 740px) and (orientation: landscape) and (min-aspect-ratio: 2/1) {
  /* 你的样式 */
}

这样宽高比达不到2的桌面设备就不会触发这个查询了。

你可以根据自己的需求选其中一个方案，最推荐的是方案一，因为它从输入设备的本质上区分了移动和桌面，兼容性也很好~

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