如何仅针对横向移动设备而不通过 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

您可以混合 CSS Media Queries 用于方向检测横向模式和悬停+指针来检测触摸设备。

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

有关仅使用 CSS 检测触摸设备的参考，这里有一篇关于medium的好文章。

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

希望这可以帮助。