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

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

当前回答

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

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还是黑莓

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/

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

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

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

希望你喜欢!

你考虑过使用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上的这篇文章，了解一些好例子

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

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

在www.tablemaker.net/test/mobile.html上可以看到一个例子，它把手机上的字体放大了三倍。

在检测移动浏览器上有开源脚本，可以在Apache、ASP、ColdFusion、JavaScript和PHP中实现这一点。

推荐文章