如何仅针对横向移动设备而不通过 CSS 影响桌面？答案

【问题标题】：How to target only landscape mobile devices without affecting desktop via CSS?如何仅针对横向移动设备而不通过 CSS 影响桌面？
【发布时间】：2020-09-22 16:55:30
【问题描述】：

有没有一种简单的方法来定位横向移动设备而不影响桌面设备，无需输入每个设备的屏幕尺寸？
如果没有，是否有针对大多数用户的最佳解决方案？
现在移动屏幕的分辨率可以与大多数桌面屏幕相同或更高，我不明白为什么许多人使用低于 640x480 的分辨率规则。

例如，要针对纵向设备（99%是移动设备），可以在

中编写规则

/*Global and desktop rules*/

@media only screen and (orientation: portrait) {
/*Mobile overwrites*/
}

但是，orientation: landscape 的相同查询也会影响桌面用户。
我的临时解决方法是使用vw、vh 和vmin，但我想知道是否有更好的方法。

mobile CSS 媒体会简化 Web 开发人员的工作吗？

【问题讨论】：

标签： css mobile media-queries landscape portrait

【解决方案1】：

试试这个：

    @media (orientation: landscape) {    

}

【讨论】：

这也会影响桌面设备

【解决方案2】：

您可以混合使用 CSS 媒体查询，用于 orientation 来检测横向模式和 hover + pointer 来检测触摸设备。

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
/* your CSS to target only landscape mobile users */
}

有关仅使用 CSS 检测触摸设备的参考，请参阅 medium 上的一篇好文章。

最好的解决方案是使用 JavaScript 来检测设备并将类添加到 <body> 或 <html> 以添加您的 CSS。您可以查看current-device，您只需包含脚本，然后根据设备的特性使用适当的类更新<html> 部分。

希望这会有所帮助。

【讨论】：

【解决方案3】：

有一个查询@media pointer，它确定用户是否有指针设备（如鼠标）。由于移动设备没有指针，您可以将not: pointer 和orientation: landscape 组合在一起，像这样

 @media (not: pointer) and (orientation: landscape) { ... }

【讨论】：