检测移动设备、平板电脑和桌面 Javascript答案

【问题标题】：Detecting Mobile vs. Tablet vs. Desktop Javascript检测移动设备、平板电脑和桌面 Javascript
【发布时间】：2013-05-06 05:58:07
【问题描述】：

我在确定使用 Javascript 的浏览器类型时遇到了一些问题。我目前的方法是捕获屏幕宽度和高度，并根据像素大小确定浏览器的类型。

我想我可以假设任何低于 768 的屏幕宽度都可以移动，任何低于 1024 的平板电脑，以及高于桌面的任何屏幕。

我已经开始在一些我可以实际使用的设备上进行测试，结果却大不相同。例如，在 android 上（确切地说是 Droid Bionic，尽管它并不重要），无论设备处于横向还是纵向模式，它都会返回 980 的宽度。这比我想象的要高得多。

目前我正在使用 document.documentElement.clientWidth 来确定宽度，但我也尝试了其他方法，例如 window.innerWidth。

我想我想问的是一个已经被问过很多次的问题，我认为我有一个非常明确的答案。显然，可能是时候刷新正确的浏览器/设备检测了。那么确定我使用的设备的实际尺寸最有效的方法是什么？

更新： 似乎移动浏览器实际上是在自行决定如何显示我的应用程序。事实上他们是，但有办法阻止它。见答案。幸运的是，这意味着我们习惯使用的标准特征检测方法仍然是确定您正在使用的设备的最佳方法。

【问题讨论】：

为什么你在做那个检测？如果你因为桌面或平板的某个特性需要适配，那么你最好测试一下这个特性是否存在。
是否有必要只用javascript来做......我的意思是同样的事情可以通过CSS媒体查询来实现......
除非您使用 viewport 元标记，否则移动浏览器将报告与实际尺寸不同的屏幕尺寸。
最终目标到底是什么？另一种选择是使用 CSS 媒体查询并在此基础上使用 javascript。
同意，但我使用非常一般的规则，例如

标签： javascript

【解决方案1】：

Per Dagg Nabbit 对这个问题的评论：

似乎移动浏览器会自行决定网站的显示方式。这通常意味着获取网站的桌面版本并缩小以适应屏幕上的内容。对于 90% 的互联网来说，这是必要的，否则移动浏览体验将是可怕的。对于响应式网站，这并不好，因为在大多数情况下，我们有非常具体的元素，必须根据正在查看网站的设备的分辨率进行更改。那么我们如何阻止浏览器这样做呢？

通过使用视口元标记。标准标签如下所示：

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

但您可以通过多种不同的方式对其进行自定义以满足您的需求。一个很好的参考是https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

【讨论】：