自动检测移动浏览器(通过用户代理?)

时间:2009-06-17 04:40:44

标签: html windows-mobile browser user-agent

如何检测用户是否正在通过移动网络浏览器查看我的网站,以便我可以自动检测并显示我的网站的相应版本?

16 个答案:

答案 0 :(得分:126)

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

答案 1 :(得分:91)

是的,阅读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文件的方法,您可以编写一个检查用户代理的模块(我没有找到已经创建的模块,但发现这个特别合适{{3} })并从一些站点获取用户代理以更新它们。然后你可以根据需要使方法复杂化,但我认为在你的情况下,以前的方法会很好。

答案 2 :(得分:33)

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

答案 3 :(得分:31)

以下是我在JavaScript中的使用方法:

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

请参阅www.tablemaker.net/test/mobile.html的示例,其中手机上的字体大小增加了三倍。

答案 4 :(得分:17)

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

答案 5 :(得分:17)

您是否考虑过使用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以获取一些好的示例

答案 6 :(得分:13)

ANDROID,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>

答案 7 :(得分:6)

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

答案 8 :(得分:5)

您只需通过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
    }

    });

答案 9 :(得分:4)

您可以检查User-Agent字符串。在JavaScript中,这非常简单,它只是导航器对象的一个​​属性。

var useragent = navigator.userAgent;

您可以使用类似

的内容检查设备中的iPhone或Blackberry
var isIphone = !!agent.match(/iPhone/i),
    isBlackberry = !!agent.match(/blackberry/i);

如果isIphone是真的你是从Iphone访问该网站,如果isBlackBerry你是从黑莓访问该网站。

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

如果您也感兴趣,可能值得查看我的脚本“redirection_mobile.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/

答案 10 :(得分:4)

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

此示例适用于asp.net

答案 11 :(得分:3)

您还没有说过您正在使用的语言。如果它是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
}

答案 12 :(得分:0)

是用户代理用于检测移动浏览器。有很多免费脚本可供检查。这是一个php code,它可以帮助您将移动用户重定向到不同的网站。

答案 13 :(得分:0)

我把这个演示包含在一起的脚本和示例:

http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/

此示例利用php函数进行用户代理检测,并提供额外的好处,即允许用户根据其浏览器或设备类型声明对站点版本的偏好,该版本通常不是默认值。这是通过cookie完成的(在服务器端使用php而不是javascript维护。)

请务必查看文章中的下载链接以获取示例。

希望你喜欢!

答案 14 :(得分:0)

MobileESP包含PHP,Java,APS.NET(C#),Ruby和JavaScript钩子。 它还有Apache 2许可证,因此可以免费用于商业用途。 对我而言,关键是它只识别浏览器和平台,而不是屏幕大小和其他指标,这使它很小。

答案 15 :(得分:-1)

使用Zend Framework有一个全新的解决方案。从指向Zend_HTTP_UserAgent的链接开始:

http://framework.zend.com/manual/en/zend.http.html