检测移动设备、平板电脑和桌面设备的Javascript代码。

Question

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

我认为可以假设任何屏幕宽度小于768的都是移动设备，任何小于1024的都是平板电脑，而大于这个尺寸的则是台式机。

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

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

我想表达的问题是一个经常被问到的问题，我以为我已经有了一个非常清晰的答案。显然，现在可能是适当的浏览器/设备检测更新的时候了。那么，确定我所在设备的实际尺寸最有效的方法是什么？

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

- ryandlf

---

你为什么要进行那个检测？如果你需要根据桌面或平板电脑的某个特定功能进行适应，那么最好测试一下这个功能是否存在。 - Denys Séguret

是否只需要使用JavaScript就可以实现它呢？我的意思是说，通过CSS媒体查询也可以达到相同的效果。 - Hiren Pandya

移动浏览器会在未使用视口元标签时报告与实际尺寸不同的屏幕尺寸。 - Dagg Nabbit

检测触摸的问题在于越来越多的设备都支持触摸。实际上，几乎每台新的Windows笔记本电脑都有触摸屏。即使您使用没有触摸屏的台式机，但如果浏览器支持触摸事件，则测试将通过。 - ryandlf

同意，但我使用非常通用的规则，例如<800是电话等。我想当我说手机与平板电脑时，我只是指典型的屏幕尺寸。如果笔记本电脑的分辨率非常低，并且与典型的iPad匹配，则仍然希望在笔记本电脑上显示网站的平板电脑版本。希望这样说得清楚。对于混淆感到抱歉。 - ryandlf

Answer 1

根据Per Dagg Nabbit在问题上的评论：

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

通过使用视口meta标签。标准标记看起来像这样：

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

但是，您可以使用许多不同的方式来自定义此内容以满足您的需求。一个好的参考是https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

- ryandlf