如何通过 CSS 仅定位横向移动设备而不影响桌面？

Question

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

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

中编写规则

/*Global and desktop rules*/

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

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

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

Answer 1

试试这个：

    @media (orientation: landscape) {    

}

Answer 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 检测设备并将 class 添加到 <body> 或 <html> 以添加您的 CSS. 您可以查看 current-device，您只需包含脚本，然后根据设备的特性使用适当的 classes 更新 <html> 部分。

希望对您有所帮助。

Answer 3

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

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

How to target only landscape mobile devices without affecting desktop via CSS?