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

我如何检测用户是否正在从移动网络浏览器浏览我的网站，以便我可以自动检测和显示我的网站的适当版本?

304622 次浏览
小开

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

小开
最佳答案

是的，读取User-Agent报头就可以了。

有一些已知的移动用户代理的列表 出，所以你不需要从头开始。当我不得不这样做时，我所做的是建立一个已知用户代理的数据库，并在检测到需要修改的未知数据时存储它们，然后手动找出它们是什么。在某些情况下，最后一项可能太过了。

如果希望在Apache级别上执行该操作，可以创建一个脚本，定期生成一组重写规则，检查用户代理(或者只检查一次，不考虑新的用户代理，或者每月检查一次，取决于您的情况)，例如

RewriteEngine On


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

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

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

小开

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

小开

在检测手机浏览器上有开源脚本，可以在Apache、ASP、ColdFusion、JavaScript和PHP中执行此操作。

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

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

小开

我把这个演示与脚本和示例包括在一起:

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

这个示例使用php函数进行用户代理检测，并提供了允许用户声明站点版本的首选项的额外好处，这通常不是基于他们的浏览器或设备类型的默认版本。这是通过cookie完成的(在服务器端使用php而不是javascript进行维护)。

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

希望你喜欢!

小开

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

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

小开

可以检查User-Agent字符串。在JavaScript中，这很简单，它只是navigator对象的一个属性。

var useragent = navigator.userAgent;

你可以在JS中检查设备是iPhone还是黑莓

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

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

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

如果你也感兴趣，可能值得一试我的脚本“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/

小开

以下是我如何在JavaScript中做到这一点:

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

参见www.tablemaker.net/test/mobile.html中的一个例子，它将移动电话上的字体大小增加了三倍。

小开

你还没说你在用什么语言。如果是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
}
小开 
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice == true)
{
Response.Redirect("Mobile//home.aspx");
}
}

这个例子在asp.net中工作

小开

MobileESP有PHP, Java, APS。NET (c#)， Ruby和JavaScript钩子。 它还拥有Apache 2许可证，因此可以免费用于商业用途。 对我来说，关键是它只识别浏览器和平台，而不识别屏幕大小和其他指标，这使它保持较小的规模。< / p >

小开

对于安卓，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>
小开

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

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

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

你还需要在你的头部添加以下meta标签:

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

在HTML5 Rocks中查看这篇文章来获得一些好的例子

小开

你可以简单地通过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
}


});

提交答案