如何检测用户是否正在通过移动Web浏览器查看我的网站,以便随后可以自动检测并显示适当版本的网站?
自动检测移动浏览器(通过用户代理?)
使用Zend Framework的全新解决方案。从指向Zend_HTTP_UserAgent的链接开始:
MobileESP具有PHP,Java,APS.NET(C#),Ruby和JavaScript挂钩。它还具有Apache 2许可,因此可以免费商业使用。对我来说,关键是它只能识别浏览器和平台,而不能识别屏幕尺寸和其他指标,这使它显得很小。
我将这个演示与脚本和示例放在一起:
http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
该示例利用php函数进行用户代理检测,并提供了额外的好处,即允许用户根据网站的浏览器或设备类型来声明对网站版本的偏好,通常这不是默认的版本。这是通过Cookie(在服务器端使用php而非javascript进行维护)完成的。
请确保查看本文中的示例下载链接。
希望你喜欢!
您可以检查User-Agent字符串。在JavaScript中,这非常容易,它只是navigator对象的一个属性。
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”插件进行测试。
如果您也有兴趣,可能值得在这里https://github.com/sebarmeli/JS-Redirection-Mobile-Site上查看托管在github上的我的脚本“ redirection_mobile.js”,您可以在以下网站之一中阅读更多详细信息我的文章在这里:
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice == true)
{
Response.Redirect("Mobile//home.aspx");
}
}
此示例在asp.net中有效
您可以通过轻松检测移动客户端 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
}
});
移动设备浏览器文件是检测ASP.NET项目的移动(和其他)浏览器的好方法:http ://mdbf.codeplex.com/
适用于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>
您是否考虑过使用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上查看本文,了解一些很好的示例
是的,读取User-Agent标头即可解决问题。
那里有一些已知的移动用户代理列表 ,因此您无需从头开始。我必须要做的是建立一个已知用户代理的数据库,并在检测到未知的版本时存储未知的内容,然后手动找出它们是什么。在某些情况下,这最后一件事可能会过大。
如果要在Apache级别执行此操作,则可以创建一个脚本,该脚本定期生成一组重写规则,以检查用户代理(或者一次并忘记新的用户代理,或者每月一次,视情况而定),例如
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
例如,将请求从http://domain/index.html移到 http://domain/mobile/index.html
如果您不喜欢使用脚本定期重新创建htaccess文件的方法,则可以编写一个模块来检查用户代理(我没有找到一个,但找到了这个特别合适的示例)并获取了用户代理。从某些网站进行更新。然后,您可以根据需要使该方法复杂化,但是我认为在您的情况下,以前的方法会很好。
这是我在JavaScript中的操作方式:
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
请参见www.tablemaker.net/test/mobile.html上的示例,该示例将手机字体大小增加了三倍。
检测移动浏览器上有开源脚本,可以在Apache,ASP,ColdFusion,JavaScript和PHP中执行此操作。
我最喜欢的移动浏览器检测机制是WURFL。它经常更新,并且可以与每个主要的编程/语言平台一起使用。
只是一个想法,但是如果您从相反的方向解决这个问题怎么办?而不是确定哪些浏览器是移动的,为什么不确定哪些浏览器不是移动的?然后,将您的网站编码为默认为移动版本,然后重定向到标准版本。查看移动浏览器时,有两种基本的可能性。它具有javascript支持或没有。因此,如果浏览器不支持javascript,它将默认为移动版本。如果确实支持JavaScript,请检查屏幕尺寸。小于特定大小的任何内容都可能是移动浏览器。任何较大的内容都将重定向到您的标准布局。然后,您要做的就是确定禁用JavaScript的用户是否是移动用户。
根据W3C,禁用JavaScript的用户数量约为5%,其中大多数用户已将其关闭,这意味着他们实际上知道他们在使用浏览器做什么。他们是观众的很大一部分吗?如果没有,那就不用担心它们。如果是这样,最坏的情况是什么?您可以让那些用户浏览您网站的移动版本,这是一件好事。
是的,用户代理用于检测移动浏览器。有很多免费的脚本可用来检查这一点。这是一个这样的php代码,它将帮助您将移动用户重定向到其他网站。