我如何检测用户是否正在从移动网络浏览器浏览我的网站,以便我可以自动检测和显示我的网站的适当版本?
当前回答
以下是我如何在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
}
我把这个演示与脚本和示例包括在一起:
http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
这个示例使用php函数进行用户代理检测,并提供了允许用户声明站点版本的首选项的额外好处,这通常不是基于他们的浏览器或设备类型的默认版本。这是通过cookie完成的(在服务器端使用php而不是javascript进行维护)。
请务必查看本文中的下载链接以获得示例。
希望你喜欢!
你考虑过使用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上的这篇文章,了解一些好例子
您可以通过导航器简单地检测移动客户机。并根据检测到的客户端类型加载备用脚本,如下所示:
$(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
}
});
在检测移动浏览器上有开源脚本,可以在Apache、ASP、ColdFusion、JavaScript和PHP中实现这一点。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击