javascript - 检测移动设备、平板电脑和桌面 Javascript

Question

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

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

我已经开始在几台实际可以上手的设备上进行测试，结果却大不相同。例如在 android 上(确切地说是 Droid Bionic，虽然它并不重要)它返回 980 的宽度，无论设备是横向还是纵向模式。这比我想象的要高得多。

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

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

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

Answer 1

根据 Dagg Nabbit 对问题的评论:

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

通过使用视口(viewport)元标记。标准标签看起来像这样:

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

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