Javascript 通过屏幕大小更好地处理桌面、手机和平板电脑，或者检测平板电脑/手机/桌面？

大多数关于响应式设计的问题的答案都是在媒体查询中使用屏幕大小来显示移动设计与桌面设计，而不是将其与手机/平板电脑/桌面浏览器的测试结合起来，或者仅使用该测试（服务器端或JavaScript）

但现在很多手机的显示器都是1080p或更高，一些浏览器会以实际像素显示（我相信iPhone safari不会）。即使有这么多像素，这种分辨率的桌面设计在手机甚至平板电脑上都不合适

此外，JavaScript中可能存在差异（桌面可能有鼠标悬停操作等）

---

处理这一切的最佳方式是什么？在媒体查询中使用屏幕大小真的更好吗？还是结合这种工作服务器端检测？或者完全是别的什么？

媒体查询是处理问题的标准方式。

标记的

viewport

属性允许开发人员管理大小和缩放。您可以阅读更多关于它的信息（Mozilla开发者网络是研究这类问题的好地方）并查找文档。不过，如果您只是想快速入门，请阅读本教程

其要点是：包括以下元标记，以防止移动浏览器将网站显示为桌面浏览器：

<meta name="viewport" content="width=device-width, initial-scale=1">

以下是一些可能有帮助的附加教程和框架：

---

---

使用媒体查询。用户代理可以撒谎，但媒体查询是为了什么？手机可能会报告一个巨大的设备宽度，这将导致在phoneGET上显示桌面或平板电脑设计；）使用手机时，会使用点和像素，因此使用像素进行媒体查询，这样就可以了。转到apple developer网页上的“点与像素”部分：此外，你应该区分横向和纵向，并确定像素-点比率：大多数设备报告视口大小是以CSS像素表示的，CSS像素不一定与屏幕上的物理像素直接匹配，尽管存在明显的相关性。用户代理嗅探充其量是一个有缺陷的解决方案，您现在只能为市场上的一部分设备维护用户代理，而且显然无法为仍将发布的设备维护用户代理列表，即使是明天可能发布的设备。服务器无法查询视口大小，更不用说报告的大小是CSS像素或实际设备分辨率。媒体查询是一种方式。那么更改的javascript/事件呢？e、 g.如果他们想在桌面上设置鼠标覆盖菜单栏，并在手机上点击显示菜单栏？需要有一种方法来检测并使用不同的代码。对我们来说，检测加载了哪个样式表（从媒体查询中）然后基于此加载适当的代码是最好的做法吗？我认为在JavaScript中检测媒体查询有点尴尬（我知道的唯一方法是在每个媒体查询中设置css属性并在JavaScript中解析这些属性）。但是，另一个选项是根据屏幕大小隐藏/显示响应悬停/单击事件的元素。我还听到一些建议，建议您避免使用悬停事件来实现基本功能，以简化体验和代码。例如，您可能有一个单击事件，除了悬停事件外，还显示一个菜单；悬停事件不是必需的，但可以增强某些桌面用户的体验