我遇到了一些使用Javascript确定浏览器类型的问题。我目前的方法是捕获屏幕宽度和高度,并根据像素大小确定浏览器的类型。
我想我可以假设768以下的任何屏幕宽度都是移动的,任何低于1024平板电脑的东西,以及任何高于桌面的东西。
我已经开始测试我可以实际操作的一些设备,结果有很大不同。例如,在Android(Droid Bionic确切但无关紧要)上,无论设备处于横向模式还是纵向模式,其返回宽度为980。这比我想象的要高得多。
目前我正在使用document.documentElement.clientWidth来确定宽度,但我也尝试过其他方法,例如window.innerWidth。
我想我想要解决的问题是多次被问过的问题,我认为我有一个非常明确的答案。显然,可能是时候刷新正确的浏览器/设备检测。那么确定我所使用设备的实际尺寸的最有效方法是什么?
更新 似乎移动浏览器实际上是在自己决定如何显示我的应用程序。事实上它们是,但有一种方法可以阻止它。见答案。幸运的是,这意味着我们习惯的标准特征检测方法仍然是确定您正在使用的设备的最佳方法。
答案 0 :(得分: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