用于区分手机和媒体的媒体查询桌面

Question

我看过许多不同的媒体查询，用于检测用户是使用手机还是桌面。然而，对于许多设备而言，分辨率，比率和许多其他因素之间的差距在高端设备（例如S8），笔记本电脑和低端手机之间重叠。

我的问题是，如果我想要一个手机样式表，其中包括所有手机和一个台式机，是否有最佳使用的媒体查询，或者我应该采用不同的方法，可能使用JavaScript

横向和纵向方法有效，直到使用软键盘并且手机重新将其视为风景

以下示例不再适用于所有设备，因为它们已经过时了。

@media only screen and (orientation : portrait)
@media only screen and (max-device-width: 480px)
@media only screen and (min-aspect-ratio: 13/9)

Answer 1

不确定这是否有帮助，但我通常坚持使用Bootstrap V4定义的断点，即使它不是Bootstrap项目。我发现这是一个很好的开发范围，而不是更多次我在更大的断点中只有特定的风格（因为我首先开发移动设备）。

如果您只想使用两个断点，我可能会建议＆lt; 768px和＆gt; 768px，但你可能会有人对此有不同的意见。你肯定会遇到某些设备的边缘情况。