移动检测
有没有办法使用 Javascript 检测移动设备? 另外,我研究了这样一个 XML,其中包含可以帮助识别移动手机的用户代理。
Is there a way to detect mobile devices using Javascript? Also, I researched that there are such an XML which contains user-agents that could help to identify the mobile handsets.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(9)
您可能有一个普通网站,并且如果满足某些条件(例如屏幕非常小,或者内容被缩小以适应较小的物理空间中的大“虚拟”屏幕),您希望重定向到移动网站。 那么,为什么不检查这些条件而不是测试无数的 UA 字符串。
尝试这样的操作:
为了让 UA 报告屏幕的物理像素大小,该标签必须出现在 html 页面中。 *
现在,只需获取屏幕大小并根据需要进行重定向。 使用轻微的延迟。 **
差不多就是这样了。 由于此页面已经为移动设备设置了视口标签,因此您也可以执行相反的操作,在此处显示移动设备并重定向到完整网站(如果屏幕更大)。
编辑:我不确定为什么这个问题已被关闭; 据我所知它非常适合 SO 格式。 投票决定重新开放。
* 用 javascript 插入它似乎不起作用(如果你找到方法,请纠正我)。 如果不存在,手机将报告大于实际屏幕的虚拟屏幕尺寸。 它似乎也不适用于 iframe,仅适用于顶级窗口(这是有道理的,因为 iframe 需要与外部窗口缩放相同的量,它们共享相同的视口)。
**一些移动浏览器保留上次加载页面的视口大小,因此它们会报告几毫秒的大虚拟屏幕大小,直到它们注意到我猜的元标记。 我找不到早期的活动来连接这个,如果您有更好的方法,请发表评论。 在我的所有测试中,50 毫秒的延迟效果很好,100 毫秒应该是安全的。
You probably have a normal site and you want to redirect to a mobile site if certain conditions are met, like the screen is very small, or the content is zoomed out to fit on a large "virtual" screen in a small physical space. So, why not check for those conditions instead of testing a zillion UA strings.
Try something like this:
For the UA to report the screen's physical pixel size, this tag must be present in the html page. *
Now, just get the size of the screen and redirect if needed. Use a slight delay. **
That's pretty much it. Since this page already has the viewport tag set up for mobile, you could also do the inverse, show mobile here and redirect to full site if screen is bigger.
Edit: I'm not sure why this question has been closed; as far as I can tell it fits the SO format pretty well. Voted to reopen.
* Inserting it with javascript doesn't seem to work (someone please correct me if you figure out a way). If it isn't present, the phone will report a virtual screen size that is larger than the actual screen. It also doesn't seem to work in iframes, only top level windows (which makes sense because iframes will need to be scaled the same amount as the outer window, they share the same viewport).
** Some mobile browsers keep the viewport size from the last loaded page, so they report a large virtual screen size for a few milliseconds, until they notice the meta tag I guess. I couldn't find an early event to hook this into, please comment if you have a better way of doing this. 50 ms delay worked fine in all my tests, 100 should be mostly safe.
我有来自 K2F 的这段代码,它是用 PHP 编写的,您必须将其转换为 JavaScript。
应该不会太麻烦。 了解常量(文本位)应该对您有很大帮助。
I have this code from K2F, it is in PHP, you will have to convert it to javascript.
Shouldn't be too much of a hassle. Knowing constants (text bits) should help you a lot.
我编写了一个名为“redirection_mobile.js”的JS脚本来解决这个问题。 如果您从移动设备访问站点,它会检测用户代理并重定向到移动版本。
在某些情况下,您想要从移动设备重定向到桌面版本(例如使用链接“转到主站点”),脚本将处理该问题,一旦您完成会话,您将再次访问移动版本。
您可以在 github 上找到源代码 https://github.com/sebarmeli/JS-Redirection-Mobile-Site 并且您可以在我的一篇文章中阅读更多详细信息:
http:// blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/
I wrote a JS script called "redirection_mobile.js" to solve this issue. It detects the User Agent and redirects to a mobile version if you're accessing a site from a mobile device.
In some case you want to redirect from a mobile device to a desktop version (like with a link "Go to the main site"), the script will handle that and once you finish your session, you'll access to the mobile version again.
You can find the source code on github here https://github.com/sebarmeli/JS-Redirection-Mobile-Site and you can read more details in one of my articles here:
http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/
我推荐的最后一个浏览器嗅探代码的地方是移动设备。 现在是狂野的西部,没有人遵循同一本规则书。 我听说一些浏览器正在模仿其他用户代理,以避免嗅探将它们排除在外的代码,就像 IE 在 90 年代那样。
如果您还不知道它的含义,请通过方法和谷歌渐进增强进行测试。 一些浏览器的 JS 实现非常混乱,不值得尝试去适应,应该提供无需 JS 的网站版本,IMO。
只需看看 JQuery 核心团队在其分级兼容性表中认为 C 级(不值得支持)的内容即可。 是的,我相信这适用于核心和 JQ 移动库(这有点像移动设备的 JQ ui,而不是移动设备的 JQ 核心 - 仍然需要核心才能工作)。
http://jquerymobile.com/gbs/
The very last place I recommend browser sniffing code is mobile. It's the wild west out there right now and nobody is reading from the same rule book. I've heard rumors some browsers are mimicking other user agents to avoid sniffing code that excludes them just like IE used to back in the '90s.
Test by method and google progressive enhancement if you don't already know what it means. Some browser implementations of JS are so messed up they're not worth trying to accomodate and should be served versions of a site that work without JS, IMO.
Just look at what JQuery's core team considers C-grade (not worth supporting) on their graded compatibility tables. And yes, I believe this applies to both the core and the JQ mobile library (which is kind of like JQ ui for mobile, not JQ core for mobile - still needs core to work).
http://jquerymobile.com/gbs/
我不建议使用 Javascript 来检测移动设备,原因很简单,其中许多设备不支持 Javascript,因此不能保证您的检测代码适用于所有设备。
通常,检测是使用 WURFL 这样的描述符文件在服务器端完成的,这不仅可以帮助您检测各种移动用户代理,还有它们的功能、屏幕尺寸、颜色深度等。这样您就可以根据移动设备提供不同的资产配置(javascript 文件、图像尺寸等)。
I wouldn't recommend using Javascript to detect mobile devices for the simple reason that many of them do not support Javascript, so your detection code is not guaranteed to work on all devices.
Usually the detection is done server-side using a descriptor file like WURFL which will not only help you detect the various mobile user-agents, but also their capabilities, screen sizes, color depths, etc. That way you can serve up a different configuration of assets (javascript files, image sizes, etc.) depending on the mobile device.
我已经发布了“Apache Mobile Filter”的最新版本,这个开源项目在前 8 个月内,从 sourceforge 获得了超过 1100 次下载,我想 CPAN 也有同样的下载量。
Apache Mobile Filter 允许您从任何编程语言访问 WURFL,而不仅仅是传统上用于动态移动网站的 Java 和 php。
该模块检测移动设备并将 WURFL 功能作为环境变量传递到其他 Web 应用程序。 它还可用于动态调整图像大小以适应移动设备的屏幕尺寸。
尝试一下,让我知道你的意见。
欲了解更多信息:http://www.idelfuschini.it/it/ apache-mobile-filter-v2x.html
I have published the last version of "Apache Mobile Filter", this open source project has in the first 8 months, more than 1100 downloads from sourceforge and I suppose the same from CPAN.
The Apache Mobile Filter allows you to access WURFL from any programming language, not just Java and php that is traditionally used for dynamic mobile web sites.
The module detects the mobile device and passes the WURFL capabilities on to the other web application as environment variables. It can also be used to resize images on the fly to adapt to the screen size of the mobile device.
Try it and let me know your opinion.
For more info: http://www.idelfuschini.it/it/apache-mobile-filter-v2x.html
http://www.hand-interactive.com/resources/detect-mobile -javascript.htm
http://www.hand-interactive.com/resources/detect-mobile-javascript.htm
插入手机检测。 您可以使用 Javascript、PHP 或最流行的脚本语言。 我们会处理痛苦,这样您就不必:-) 免责声明 - 我在那里工作。
Plug in Handset Detection. You can use Javascript, PHP or most popular scripting languages. We deal with the pain so you don't have to :-) Disclaimer - i work there.
这是一个移动检测 Javascript,我可以保证它即使在像 Opera MIni 这样的瘦客户端上也能很好地工作(免责声明:我写的):
https://github.com/miohtama/detectmobile.js
Here is a mobile detection Javascript which I can guarantee to work very well even with thin clients like Opera MIni (disclaimer: I wrote it):
https://github.com/miohtama/detectmobile.js