3

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

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

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

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

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

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

4

1 回答 1

2

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

于 2013-05-06T06:24:25.840 回答