自动检测手机浏览器(通过用户代理?)
如何检测用户是否正在通过移动networking浏览器查看我的网站,以便我可以自动检测并显示相应版本的网站?
是的,阅读用户代理头将做的伎俩。
有一些已知的移动用户代理列表 ,所以你不需要从头开始。 我在做什么的时候需要build立一个已知的用户代理数据库,并存储未知数据,因为他们被检测到修改,然后手动弄清楚它们是什么。 在某些情况下,这最后一件事可能是矫枉过正的。
如果你想在Apache级别上做,你可以创build一个脚本定期生成一套重写规则来检查用户代理(或者只是一次,忘记新的用户代理,或者一个月一次,无论你的情况如何),就像
RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...) RewriteRule (.*) mobile/$1
例如,请求将http://domain/index.html移动到http://domain/mobile/index.html
如果你不喜欢让脚本定期重新创build一个htaccess文件的方法,你可以编写一个模块来检查用户代理(我没有find一个已经创build的,但是发现这个特别合适的例子 )并且得到用户代理从一些网站更新它们。 然后,您可以尽可能多地使方法复杂化,但我认为在您的情况下,以前的方法将会很好。
Detect Mobile Browser上有开源的脚本,可以在Apache,ASP,ColdFusion,JavaScript和PHP中执行此操作。
只是一个想法,但如果你从相反的方向来解决这个问题呢? 而不是确定哪些浏览器是移动的,为什么不确定哪些浏览器不是? 然后将您的网站编码默认为移动版本,并redirect到标准版本。 在查看移动浏览器时有两种基本的可能性。 要么有JavaScript支持,要么没有。 所以如果浏览器没有JavaScript支持,它将默认为移动版本。 如果它支持JavaScript,请检查屏幕大小。 任何低于一定大小的东西都可能是手机浏览器。 任何更大的将被redirect到您的标准布局。 然后,您只需确定禁用JavaScript的用户是否为移动用户即可。
根据W3C,禁用JavaScript的用户数量大约是5%,大多数用户已经closures,这意味着他们实际上知道他们在浏览器中所做的事情。 他们是你的观众的很大一部分? 如果没有,那么不要担心。 如果是这样,最坏的情况是什么? 你有这些用户浏览您的网站的移动版本,这是一件好事。
以下是我在JavaScript中的做法:
function isMobile() { var index = navigator.appVersion.indexOf("Mobile"); return (index > -1); }
在www.tablemaker.net/test/mobile.html看到一个例子,它使手机的字体大小增加了三倍。
我最喜欢的移动浏览器检测机制是WURFL 。 它经常更新,它适用于每个主要的编程/语言平台。
你有没有考虑过使用css3媒体查询? 在大多数情况下,您可以为目标设备专门应用一些CSS样式,而无需创build单独的移动版本的网站。
@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上的这篇文章 ,了解一些很好的例子
为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>
移动设备浏览器文件是检测ASP.NET项目的移动(和其他)broswers的好方法: http ://mdbf.codeplex.com/
您只需通过navigator.userAgent
即可检测到移动客户端,并根据检测到的客户端types加载替代脚本,如下所示:
$(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 } });
您可以检查User-Agentstring。 在JavaScript中,这非常简单,它只是导航器对象的一个属性。
var useragent = navigator.userAgent;
你可以检查设备如果iPhone或黑莓在JS中的东西
var isIphone = !!agent.match(/iPhone/i), isBlackberry = !!agent.match(/blackberry/i);
如果isIphone是真的,你是从一个iPhone访问该网站,如果isBlackBerry你是从黑莓访问该网站。
你可以使用“UserAgent Switcher”插件的Firefox来testing。
如果你也有兴趣,这可能是值得的检查我的脚本“redirection_mobile.js”托pipe在github这里https://github.com/sebarmeli/JS-Redirection-Mobile-Site ,你可以阅读更多的细节在我的文章在这里:
protected void Page_Load(object sender, EventArgs e) { if (Request.Browser.IsMobileDevice == true) { Response.Redirect("Mobile//home.aspx"); } }
这个例子在asp.net中有效
你还没有说你在用什么语言。 如果它是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 }
是的用户代理是用来检测移动浏览器。 有很多免费的脚本可以检查这个。 这里有一个这样的PHP代码 ,这将帮助您将移动用户redirect到不同的网站。
我把这个演示与脚本和例子放在一起:
http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
这个例子利用PHPfunction进行用户代理检测,并提供了额外的好处,允许用户声明一个版本的网站,通常不会默认根据他们的浏览器或设备types。 这是通过cookie(在服务器端使用php进行维护而不是使用javascript来完成的)。
请务必查看文章中的下载链接。
希望你喜欢!
MobileESP有PHP,Java,APS.NET(C#),Ruby和JavaScript钩子。 它也有Apache 2许可证,因此可以免费用于商业用途。 对我来说关键的是它只识别浏览器和平台,而不是屏幕尺寸和其他指标,这使得它很好。
有一个使用Zend Framework的全新解决scheme。 从指向Zend_HTTP_UserAgent的链接开始: