检测手机、平板电脑和桌面Javascript

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

我想我可以假设任何小于768的屏幕宽度都是移动的，任何小于1024的平板电脑都是移动的，任何大于1024的都是桌面

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

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

我想我想问的是一个被问了很多次的问题，我想我已经有了一个非常清楚的答案。显然是时候对浏览器/设备进行适当的检测了。那么，确定我使用的设备的实际大小的最有效方法是什么

更新：

---

似乎移动浏览器正在自行决定如何显示我的应用程序。事实上是这样，但有一种方法可以阻止它。见答案。幸运的是，这意味着我们使用的标准功能检测方法仍然是确定您正在使用的设备的最佳方法。

根据Dagg Nabbit对该问题的评论：

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

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

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

---

但是有很多不同的方法可以定制它以满足您的需要。一个很好的参考是

为什么要进行这种检测？如果由于桌面或平板电脑的某个功能而需要进行调整，那么最好测试该功能是否存在。是否只需要使用javascript进行调整。。我的意思是，同样的事情也可以通过CSS媒体查询实现……移动浏览器会报告与实际大小不同的屏幕大小，除非您使用meta标记。最终目标是什么？另一种选择是使用CSS媒体查询，并在此基础上使用javascript。同意，但我使用非常一般的规则，如<800是手机等。我想当我说移动与平板电脑时，我只是指典型的屏幕大小。如果一台笔记本电脑的分辨率很低，并且与典型的iPad相匹配，那么我仍然希望在笔记本电脑上显示该网站的平板电脑版本。希望这是有道理的。很抱歉给你带来了困惑。