javascript - 移动检测

标签 javascript mobile user-agent browser-detection

有没有办法使用 Javascript 检测移动设备?另外,我研究了这样一个 XML,其中包含可以帮助识别移动手机的用户代理。

最佳答案

您可能有一个普通网站,并且如果满足某些条件(例如屏幕非常小,或者内容被缩小以适合小型物理设备中的大型“虚拟”屏幕),您希望重定向到移动网站空间。那么,为什么不检查这些条件而不是测试无数的 UA 字符串。

尝试这样的事情:

为了让 UA 报告屏幕的物理像素大小,该标签必须出现在 html 页面中。 *

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

现在,只需获取屏幕的大小并根据需要进行重定向。使用轻微的延迟。 **

setTimeout(function(){
  if ((screen.width < 480) || (screen.height < 480)) {
    location.replace('/mobile/');
  }
}, 100);

差不多就这些了。由于此页面已经为移动设备设置了视口(viewport)标记,因此您也可以执行相反的操作,在此处显示移动设备,如果屏幕更大,则重定向到完整网站。

编辑:我不确定为什么这个问题已被关闭;据我所知它非常适合 SO 格式。投票决定重新开放。

* 使用 javascript 插入它似乎不起作用(如果您找到方法,请纠正我)。如果不存在,手机将报告大于实际屏幕的虚拟屏幕尺寸。它似乎也不适用于 iframe,仅适用于顶级窗口(这是有道理的,因为 iframe 需要与外部窗口缩放相同的量,它们共享相同的视口(viewport))。

** 一些移动浏览器保留上次加载页面的视口(viewport)大小,因此它们会报告大的虚拟屏幕大小几毫秒,直到它们注意到我猜的元标记。我找不到早期的事件来连接这个,如果您有更好的方法,请发表评论。在我的所有测试中,50 毫秒的延迟效果很好,100 毫秒应该是安全的。

关于javascript - 移动检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/743129/

相关文章:

javascript - Jquery 滚动条问题 - 调整窗口大小或打开 Firebug 解决

javascript - 通过手机查看时网站按钮不起作用

android - 为 Android 开发 UI

html - CSS 导航栏在移动设备上运行缓慢

ios - iOS safari 用户代理中的设备标识符?

wget - Wget 中的默认用户代理

javascript - 打开手机摄像头从网页扫描条码

javascript - 未捕获的类型错误 : Cannot read property 'url' of undefined - Google Image API

c# - Request.UserAgent 和 Request.Browser 有什么区别?

javascript - 如何在 JavaScript 中检索 html 元素的 id