自动检测移动浏览器（通过用户代理？）[关闭]答案

【问题标题】：Auto detect mobile browser (via user-agent?) [closed]自动检测移动浏览器（通过用户代理？）[关闭]
【发布时间】：2016-09-19 19:49:31
【问题描述】：

我如何检测用户是否从移动网络浏览器查看我的网站，以便我可以自动检测并显示我的网站的适当版本？

【问题讨论】：

iPad 算不算？ :)
Seva 的评论提出了一个很好的问题。 “移动”今天的真正含义是什么？它是指具有浏览器但没有太多浏览器的“功能手机”吗？它是指输入法和显示分辨率是限制因素的全功能智能手机吗？既易于交互又具有高分辨率显示屏的平板电脑怎么样？像媒体中心这样的设备怎么样——它们从不离开客厅，但也有类似的限制。一个工作的朋友给我发了这个。我发现它非常有见地。 slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
@Ricki 但在 ipad 上你仍然不能，例如显示 Flash 内容或使用基于 JavaScript 的富文本编辑器，如 tinymce。
ipad 无法查看 flash，但这是一个不同的主题，例如检测浏览器是否支持 flash。
只是一个来自未来的帖子，但任何有兴趣为其网站提供移动版本的人都可能会对一些关于“响应式设计”的文章感兴趣。

标签： html windows-mobile browser user-agent

【解决方案1】：

Detect Mobile Browser 上有开源脚本可以在 Apache、ASP、ColdFusion、JavaScript 和 PHP 中执行此操作。

【讨论】：

@guitar 如果是这种情况，那么您应该发送您的 UA。
Bleh... 我真的不喜欢这些解决方案的“代码味道”。使用一堆 4 字符前缀的正则表达式匹配，不知道它们最初来自哪里......不，谢谢。
这是一个笨拙的正则表达式语句。我同意，这个代码味道不好。
我也不喜欢没有许可证且没有更新迹象的“开源”解决方案。
虽然没有办法。在某种程度上，任何类型的解决方案都会对用户代理进行正则表达式检查。

【解决方案2】：

是的，阅读 User-Agent 标头就可以了。

有一些已知的移动用户代理lists out，因此您无需从头开始。我不得不做的是建立一个已知用户代理的数据库，并在检测到它们进行修订时存储未知数，然后手动找出它们是什么。在某些情况下，最后这件事可能有点矫枉过正。

如果您想在 Apache 级别执行此操作，您可以创建一个脚本，该脚本会定期生成一组重写规则来检查用户代理（或者只需一次而忘记新的用户代理，或者每月一次，只要适合您的情况), 像

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1

这会将请求转移到http://domain/index.html 到http://domain/mobile/index.html

如果您不喜欢让脚本定期重新创建 htaccess 文件的方法，您可以编写一个模块来检查用户代理（我没有找到已经制作的模块，但发现这个特别合适example）并从某些站点获取用户代理来更新它们。然后，您可以根据需要使方法复杂化，但我认为在您的情况下，以前的方法会很好。

【讨论】：

这是否可以通过某种类型的 .htaccess 命令在 Web 服务器层 (Apache) 完成 - 而不是使用像 PHP 这样的脚本语言？
通过用户代理设置文档根目录的任何想法

【解决方案3】：

只是一个想法，但如果你从相反的方向解决这个问题呢？与其确定哪些浏览器是移动的，为什么不确定哪些浏览器不是？然后将您的网站编码为默认为移动版本并重定向到标准版本。查看移动浏览器时有两种基本可能性。它要么支持javascript，要么不支持。因此，如果浏览器不支持 javascript，它将默认为移动版本。如果确实支持 JavaScript，请检查屏幕大小。任何低于一定大小的东西也可能是移动浏览器。任何更大的东西都会被重定向到您的标准布局。然后，您需要做的就是确定禁用 JavaScript 的用户是否是移动用户。
根据 W3C 的说法，禁用 JavaScript 的用户数量约为 5%，其中大多数用户已将其关闭，这意味着他们实际上知道自己在使用浏览器做什么。他们是你的大部分观众吗？如果没有，那么不要担心他们。如果是这样，最坏的情况是什么？您让这些用户浏览您网站的移动版本，这是一件好事。

【讨论】：

这是一个非常好的主意，我认为这是一个优雅的解决方案。
+1 这听起来是个好主意，但这会影响搜索引擎爬虫吗？
这是一个错误的想法。禁用 javascript 的浏览器扩展在桌面浏览器上非常流行，因此假设没有 javascript 意味着移动是完全错误的。窗口/视口/屏幕分辨率与浏览器的大小无关，假设低分辨率表示手持设备大小将使您的 Web 应用程序丑陋且令许多用户感到沮丧。（例如：非全屏窗口中的桌面浏览器、大型平板电脑。）

【解决方案4】：

这是我在 JavaScript 中的做法：

function isMobile() {
  var index = navigator.appVersion.indexOf("Mobile");
  return (index > -1);
}

查看www.tablemaker.net/test/mobile.html 的示例，它将手机上的字体大小增加三倍。

【讨论】：

如果您想合并您的帐户，请参见此处：meta.stackexchange.com/questions/18232/…
这对于平板电脑（例如 iPad）不起作用
因为 Opera Mobile 而使用“mobi”。
你需要“Opera Mini”，因为这是少数不在用户代理中使用“mobi”的浏览器之一。

【解决方案5】：

我最喜欢的移动浏览器检测机制是WURFL。它经常更新，适用于所有主要的编程/语言平台。

【讨论】：

这很好，但“适用于所有主要编程/语言平台”的说法有点大胆。
也是no longer free。
它现在只能在讨厌的 AGPL 许可下使用，除非您购买它。 en.wikipedia.org/wiki/WURFL#License_update

【解决方案6】：

您是否考虑过使用 css3 媒体查询？在大多数情况下，您可以专门为目标设备应用一些 CSS 样式，而无需创建单独的移动版网站。

@media screen and (max-width:1025px) {
   #content {
     width: 100%;
   }
}

您可以将宽度设置为任意值，但 1025 会捕捉 iPad 横向视图。

您还需要将以下元标记添加到您的头部：

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

在 HTML5 Rocks 上查看 this article 以获得一些很好的示例

【讨论】：

我认为这实际上是最好的方法。查看用户代理字符串的脚本注定会过时。查看可用的屏幕空间可以进行响应式设计，而无需担心不会检测到新设备。
这仅适用于客户端检测。但是，如果您希望服务器端对移动客户端有不同的行为，则需要使用其他一些技术。
这对于没有全屏运行的桌面浏览器来说非常失败。如果您仍然选择这样做，请不要用巨大的字体和边距浪费屏幕空间，或将重要的功能/信息隐藏在下拉菜单后面。它会让你的网站/应用变得丑陋，让你的一些用户感到沮丧。

【解决方案7】：

适用于安卓、IPHONE、IPAD、BLACKBERRY、PALM、WINDOWS CE、PALM

 <script language="javascript"> <!--
     var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
              if (mobile) {
                  alert("MOBILE DEVICE DETECTED");
                  document.write("<b>------------------------------------------<br>")
                  document.write("<b>" + navigator.userAgent + "<br>")
                  document.write("<b>------------------------------------------<br>")
                  var userAgent = navigator.userAgent.toLowerCase();
                  if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
                         document.write("<b> ANDROID MOBILE <br>")
                   else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
                       document.write("<b> ANDROID TABLET <br>")
                   else if ((userAgent.search("blackberry") > -1))
                       document.write("<b> BLACKBERRY DEVICE <br>")
                   else if ((userAgent.search("iphone") > -1))
                       document.write("<b> IPHONE DEVICE <br>")              
                   else if ((userAgent.search("ipod") > -1))
                       document.write("<b> IPOD DEVICE <br>")
               else if ((userAgent.search("ipad") > -1))
                       document.write("<b> IPAD DEVICE <br>")
                       else
                   document.write("<b> UNKNOWN DEVICE <br>")
              }
              else
                  alert("NO MOBILE DEVICE DETECTED"); //--> </script>

【讨论】：

我觉得这很有帮助。
您绝对应该查看 Conditionizr，它将为您处理所有这些！您可以添加自定义测试，通过对象测试获取它们并进行回调。他们还提供了一系列预制测试：conditionizr.com/detects
Elenasys，感谢您提供有用的答案。虽然，我在我的数据库中找不到任何匹配“windows\sce”的 UA。
这不适用于 windows 手机。
谢谢，但未指定 Windows phone...

【解决方案8】：

移动设备浏览器文件是检测 ASP.NET 项目的移动（和其他）浏览器的好方法：http://mdbf.codeplex.com/

【讨论】：

移动设备浏览器还在工作吗？我注意到有一个关于它离线的符号？...

【解决方案9】：

您可以简单地通过navigator.userAgent 检测移动客户端，并根据检测到的客户端类型加载备用脚本：

 $(document).ready(function(e) {

        if(navigator.userAgent.match(/Android/i)
          || navigator.userAgent.match(/webOS/i)
          || navigator.userAgent.match(/iPhone/i)
          || navigator.userAgent.match(/iPad/i)
          || navigator.userAgent.match(/iPod/i)
          || navigator.userAgent.match(/BlackBerry/i)
          || navigator.userAgent.match(/Windows Phone/i)) {

         //write code for your mobile clients here.

          var jsScript = document.createElement("script");
          jsScript.setAttribute("type", "text/javascript");
          jsScript.setAttribute("src", "js/alternate_js_file.js");
          document.getElementsByTagName("head")[0].appendChild(jsScript );

          var cssScript = document.createElement("link");
          cssScript.setAttribute("rel", "stylesheet");
          cssScript.setAttribute("type", "text/css");
          cssScript.setAttribute("href", "css/alternate_css_file.css");
          document.getElementsByTagName("head")[0].appendChild(cssScript); 

    }
    else{
         // write code for your desktop clients here
    }

    });

【讨论】：

要获得更易于管理的解决方案，您可以使用 Conditionizr 来为您处理这一切！您可以添加自定义测试，通过对象测试获取它们并进行回调。他们还提供了一系列预制测试：conditionizr.com/detects

【解决方案10】：

您可以检查用户代理字符串。在 JavaScript 中，这很简单，它只是导航器对象的一个属性。

var useragent = navigator.userAgent;

您可以在 JS 中检查设备是否为 iPhone 或 Blackberry 之类的

var isIphone = !!agent.match(/iPhone/i),
    isBlackberry = !!agent.match(/blackberry/i);

如果 isIphone 为 true，则您正在从 Iphone 访问该站点，如果 isBlackBerry 您正在从 Blackberry 访问该站点。

您可以使用 firefox 的“UserAgent Switcher”插件进行测试。

如果您也有兴趣，不妨看看我在 github 上托管的脚本 "redirection_mobile.js" 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/

【讨论】：

在这里使用 .match 是错误的，您想使用 .test() 评估为布尔值，它也比 .match() 快得多并且不返回数组。要为您的 userAgent 测试提供更易于管理的解决方案，您可以使用 Conditionizr 它将为您处理所有这些！您可以添加自定义测试，通过对象测试获取它们并进行回调。他们还提供了一系列预制测试：conditionizr.com/detects

【解决方案11】：

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.IsMobileDevice == true)
    {
        Response.Redirect("Mobile//home.aspx");
    }
}

此示例适用于 asp.net

【讨论】：

【解决方案12】：

你还没有说你使用的是什么语言。如果是 Perl，那么它是微不足道的：

use CGI::Info;

my $info = CGI::Info->new();

if($info->is_mobile()) {
   # Add mobile stuff
}

unless($info->is_mobile()) {
   # Don't do some things on a mobile
}

【讨论】：