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

How can I detect if a user is viewing my web site from a mobile web browser so that I can then auto detect and display the appropriate version of my web site?

如何检测用户是否正在从移动web浏览器查看我的web站点，以便我能够自动检测和显示我的web站点的适当版本?

16 个解决方案

#1

Yes, reading the User-Agent header will do the trick.

是的，读取用户代理头将会成功。

There are some lists out there of known mobile user agents so you don't need to start from scratch. What I did when I had to is to build a database of known user agents and store unknowns as they are detected for revision and then manually figure out what they are. This last thing might be overkill in some cases.

有一些已知的移动用户代理列表，所以您不需要从头开始。当我要做的是建立一个已知用户代理的数据库，并在检测到未知的用户代理并进行修改时存储它们，然后手工确定它们是什么。在某些情况下，最后一件事可能会被过分夸大。

If you want to do it at Apache level, you can create a script which periodically generates a set of rewrite rules checking the user agent (or just once and forget about new user agents, or once a month, whatever suits your case), like

如果您希望在Apache级别上进行此操作，您可以创建一个脚本，该脚本定期生成一组重写规则，检查用户代理(或者只检查一次，忘记新的用户代理，或者每月一次，任何适合您的情况)

RewriteEngine On

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

which would move, for example, requests to http://domain/index.html to http://domain/mobile/index.html

例如，将请求移动到http://domain/index。html到http://domain/mobile/index.html

If you don't like the approach of having a script recreate a htaccess file periodically, you can write a module which checks the User Agent (I didn't find one already made, but found this particularly appropriate example) and get the user agents from some sites to update them. Then you can complicate the approach as much as you want, but I think in your case the previous approach would be fine.

如果您不喜欢使用脚本定期重新创建htaccess文件的方法，您可以编写一个模块来检查用户代理(我没有找到已经做过的，但是找到了这个特别合适的示例)，并从一些站点获取用户代理来更新它们。然后您可以尽可能地使方法复杂化，但我认为在您的情况下，前面的方法是可以的。

#2

126

There are open source scripts on Detect Mobile Browser that do this in Apache, ASP, ColdFusion, JavaScript and PHP.

在Apache、ASP、ColdFusion、JavaScript和PHP中，都有用于检测移动浏览器的开源脚本。

#3

Just a thought but what if you worked this problem from the opposite direction? Rather than determining which browsers are mobile why not determine which browsers are not? Then code your site to default to the mobile version and redirect to the standard version. There are two basic possibilities when looking at a mobile browser. Either it has javascript support or it doesn't. So if the browser does not have javascript support it will default to the mobile version. If it does have JavaScript support, check the screen size. Anything below a certain size will likely also be a mobile browser. Anything larger will get redirected to your standard layout. Then all you need to do is determine if the user with JavaScript disabled is mobile or not.
According to the W3C the number of users with JavaScript disabled was about 5% and of those users most have turned it off which implies that they actually know what they are doing with a browser. Are they a large part of your audience? If not then don't worry about them. If so, whats the worst case scenario? You have those users browsing the mobile version of your site, and that's a good thing.

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

#4

Here's how I do it in JavaScript:

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

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

See an example at www.tablemaker.net/test/mobile.html where it triples the font size on mobile phones.

请参见www.tablemaker.net/test/mobile.html中的示例，其中的字体大小是移动电话的三倍。

#5

My favorite Mobile Browser Detection mechanism is WURFL. It's updated frequently and it works with every major programming/language platform.

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

#6

Have you considered using css3 media queries? In most cases you can apply some css styles specifically for the targeted device without having to create a separate mobile version of the site.

你考虑过使用css3媒体查询吗?在大多数情况下，您可以为目标设备应用一些css样式，而不必为站点创建单独的移动版本。

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

You can set the width to whatever you want, but 1025 will catch the iPad landscape view.

你可以将宽度设置为你想要的任何宽度，但是1025将会捕获iPad的横向视图。

You'll also want to add the following meta tag to your head:

您还需要在您的脑海中添加以下元标签:

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

Check out this article over at HTML5 Rocks for some good examples

看看这篇关于HTML5 Rocks的文章吧。

#7

for ANDROID , IPHONE, IPAD, BLACKBERRY, PALM, WINDOWS CE, PALM

安卓，IPHONE, IPAD，黑莓，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>

#8

The Mobile Device Browser File is a great way to detect mobile (and other) broswers for ASP.NET projects: http://mdbf.codeplex.com/

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

#9

You can detect mobile clients simply through navigator.userAgent , and load alternate scripts based on the detected client type as:

您可以通过导航器检测移动客户端。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
    }

    });

#10

You can check the User-Agent string. In JavaScript, that's really easy, it's just a property of the navigator object.

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

var useragent = navigator.userAgent;

You can check if the device if iPhone or Blackberry in JS with something like

你可以用JS检查iPhone或黑莓手机是否有类似功能

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

if isIphone is true you are accessing the site from an Iphone, if isBlackBerry you are accessing the site from a Blackberry.

如果isIphone是真的，你是通过Iphone访问网站，如果isBlackBerry，你是通过黑莓访问网站。

You can use "UserAgent Switcher" plugin for firefox to test that.

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

If you are also interested, it may be worth it checking out my script "redirection_mobile.js" hosted on github here https://github.com/sebarmeli/JS-Redirection-Mobile-Site and you can read more details in one of my article here:

如果你也感兴趣，不妨看看我的脚本“redirection_mobile”。js“托管在github上，https://github.com/sebarmeli/js-redirec-mobile站点，您可以在我的一篇文章中阅读更多细节:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/

#11

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

This example works in asp.net

这个示例在asp.net中工作

#12

You haven't said what language you're using. If it's Perl then it's trivial:

你还没说你在用什么语言。如果它是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
}

#13

Yes user-agent is used to detect mobile browsers. There are lots of free scripts available to check this. Here is one such php code which will help you redirect mobile users to different website.

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

#14

I put this demo with scripts and examples included together:

我将这个演示与脚本和示例放在一起:

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

This example utilizes php functions for user agent detection and offers the additional benefit of permitting users to state a preference for a version of the site which would not typically be the default based on their browser or device type. This is done with cookies (maintained using php on the server-side as opposed to javascript.)

本例使用php函数进行用户代理检测，并提供了允许用户根据浏览器或设备类型声明站点版本的首选项的附加好处。这是使用cookie完成的(在服务器端使用php而不是javascript维护)。

Be sure to check out the download link in the article for the examples.

请务必在本文的下载链接中查看示例。

Hope you enjoy!

希望你能喜欢!

#15

MobileESP has PHP, Java, APS.NET (C#), Ruby and JavaScript hooks. it has also the Apache 2 licence, so free for commercial use. Key thing for me is it only identifies browsers and platforms not screen sizes and other metrics, which keeps it nice an small.

MobileESP有PHP、Java和APS。NET (c#)、Ruby和JavaScript钩子。它也有Apache 2许可证，所以商业使用是免费的。对我来说，最重要的是它只识别浏览器和平台，而不识别屏幕大小和其他指标，这使得它非常小。

#16

-1

There's a brand new solution using Zend Framework. Start from the link to Zend_HTTP_UserAgent:

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

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

#1