检测移动与平板电脑VS桌面的Javascript

我遇到了一些问题，确定使用JavaScript的浏览器类型。我目前的方法是捕获屏幕的宽度和高度，并根据像素大小确定浏览器的类型。检测移动与平板电脑VS桌面的Javascript

我想我可以假设，768在任何屏幕宽度将是移动，任何小于1024平板电脑，并高于桌面任何东西。

我已经开始测试中的一些设备实际上，我可以得到我的手，结果是非常不同的。例如，在一个android（Droid仿生，虽然它并不重要），但无论设备处于横向模式还是纵向模式，其返回宽度为980。这比我想象的要高得多。

目前我使用document.documentElement.clientWidth确定的宽度，但我曾尝试其他方法，如window.innerWidth为好。

我猜我想要知道的是，已经被问过很多次的问题，我认为我有一个相当明确的答案。显然，它可能是适当的浏览器/设备检测刷新的时间。那么确定设备实际尺寸的最有效方法是什么？

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

来源

2013-05-06 ryandlf

* *为什么要那样做检测？如果您需要根据台式机或平板电脑的特定功能进行调整，那么您最好测试此功能的存在。 – 2013-05-06 05:59:09

是否有必要用JavaScript做它唯一的..我的意思是一样的东西可以通过CSS媒体查询来实现... – 2013-05-06 06:03:05

移动浏览器会从实际大小，除非您使用[视]（HTTPS报告不同的屏幕尺寸： //developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag）元标记。 – 2013-05-06 06:03:41

每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

来源

2013-05-06 06:24:25 ryandlf

检测移动与平板电脑VS桌面的Javascript

回答

相关问题