我如何检测用户是否正在从移动网络浏览器浏览我的网站,以便我可以自动检测和显示我的网站的适当版本?
当前回答
您可以通过导航器简单地检测移动客户机。并根据检测到的客户端类型加载备用脚本,如下所示:
$(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
}
});
其他回答
我把这个演示与脚本和示例包括在一起:
http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
这个示例使用php函数进行用户代理检测,并提供了允许用户声明站点版本的首选项的额外好处,这通常不是基于他们的浏览器或设备类型的默认版本。这是通过cookie完成的(在服务器端使用php而不是javascript进行维护)。
请务必查看本文中的下载链接以获得示例。
希望你喜欢!
您可以通过导航器简单地检测移动客户机。并根据检测到的客户端类型加载备用脚本,如下所示:
$(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-Agent报头就可以了。
有一些已知的移动用户代理列表,所以您不需要从头开始。当我不得不这样做时,我所做的是建立一个已知用户代理的数据库,并在检测到需要修改的未知数据时存储它们,然后手动找出它们是什么。在某些情况下,最后一项可能太过了。
如果希望在Apache级别上执行该操作,可以创建一个脚本,定期生成一组重写规则,检查用户代理(或者只检查一次,不考虑新的用户代理,或者每月检查一次,取决于您的情况),例如
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
例如,将请求移到http://domain/index.html到http://domain/mobile/index.html
如果你不喜欢让脚本定期重新创建htaccess文件的方法,你可以写一个模块来检查用户代理(我没有找到一个已经创建的,但找到了这个特别合适的例子),并从一些站点获取用户代理来更新它们。然后你可以把这个方法尽可能复杂化,但我认为在你的情况下,之前的方法就可以了。
MobileESP有PHP, Java, APS。NET (c#), Ruby和JavaScript钩子。 它还拥有Apache 2许可证,因此可以免费用于商业用途。 对我来说,关键是它只识别浏览器和平台,而不识别屏幕大小和其他指标,这使它保持较小的规模。
有一个全新的解决方案使用Zend框架。从Zend_HTTP_UserAgent的链接开始:
http://framework.zend.com/manual/en/zend.http.html
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 在一个CSS宽度的小数点后的位置是尊重?
- 我怎么能选择一个特定的类的最后一个元素,而不是父里面的最后一个孩子?
- 反应:为什么当道具改变时子组件不更新
- 我怎么能检查html元素,从DOM消失失去焦点?
- 在Atom编辑器中是否有格式化HTML的命令?
- 把<script>标签放在</body>标签之后是错误的吗?
- 谷歌Chrome表单自动填充和它的黄色背景