通过屏幕尺寸或检测平板电脑/手机/台式机更好地处理台式机与手机与平板电脑？答案

【问题标题】：Better to handle desktop vs phone vs tablet by screen size or detect tablet/phone/desktop?通过屏幕尺寸或检测平板电脑/手机/台式机更好地处理台式机与手机与平板电脑？
【发布时间】：2014-08-19 18:00:32
【问题描述】：

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

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

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

处理这一切的最佳方法是什么？在媒体查询中使用屏幕尺寸真的更好吗？还是这个工作服务器端检测的组合？还是完全不同的东西？

【问题讨论】：

使用媒体查询。用户代理会撒谎。
@Diodeus 但媒体查询什么？手机可能会报告一个巨大的设备宽度，这将导致桌面或平板电脑的设计显示在手机上
GET BOOTSTRAP ;)
对于手机，使用点和像素，所以根据像素进行媒体查询，它会起作用。转到此苹果开发者网页上的“点与像素”部分：developer.apple.com/library/ios/documentation/2ddrawing/… 另外，您应该区分横向和纵向并确定像素点比：stephen.io/mediaqueries
大多数设备以 CSS 像素的形式报告视口大小，这不一定与屏幕上的物理像素直接匹配——尽管显然存在相关性。用户代理嗅探充其量是一个有缺陷的解决方案，您现在只能维护市场上一部分设备的用户代理 - 显然无法维护尚未发布的设备的用户代理列表，即使是明天可能宣布的设备.服务器无法查询视口大小，如果报告的大小是 CSS 像素或实际设备分辨率，则更不用说。媒体查询是必经之路。

标签： javascript html css responsive-design

【解决方案1】：

媒体查询是处理Responsive Web Design 的标准方式。 <meta> 标签的 viewport 属性允许开发人员管理大小和缩放。你可以阅读更多关于它的信息here（Mozilla 开发者网络是研究这类问题的好地方）并找到文档here。但是，如果您只想快速入门，请阅读 this 教程。

它的要点是：包含以下元标记以防止移动浏览器像桌面浏览器那样显示网站：

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

这里有一些额外的教程和框架可能会有所帮助：

【讨论】：

更改的 javascript/事件怎么样？例如如果他们想要桌面上的鼠标悬停菜单栏和移动设备上的点击显示菜单栏？需要有一种方法来检测并使用不同的代码。最好让我们 JS 检测（从媒体查询中）加载了哪个样式表，然后根据它加载正确的代码？
我认为在 JavaScript 中检测媒体查询有点尴尬（我知道的唯一方法是为每个媒体查询设置 css 属性并在 JavaScript 中解析这些属性）。但是，另一种选择是根据屏幕大小隐藏/显示响应悬停/单击事件的元素。我还听到了一些建议，即避免将悬停事件用于基本功能以简化体验和代码。例如，除了悬停事件之外，您还可以有一个显示菜单的单击事件；悬停事件不是必需的，但可以增强某些桌面用户的体验。
如果您确实想使用 JavaScript 检测触摸设备，请参阅此问题 here