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


当前回答

Just a thought but what if you worked this problem from the opposite direction? Rather than determining which browsers are mobile why not determine which browsers are not? Then code your site to default to the mobile version and redirect to the standard version. There are two basic possibilities when looking at a mobile browser. Either it has javascript support or it doesn't. So if the browser does not have javascript support it will default to the mobile version. If it does have JavaScript support, check the screen size. Anything below a certain size will likely also be a mobile browser. Anything larger will get redirected to your standard layout. Then all you need to do is determine if the user with JavaScript disabled is mobile or not. According to the W3C the number of users with JavaScript disabled was about 5% and of those users most have turned it off which implies that they actually know what they are doing with a browser. Are they a large part of your audience? If not then don't worry about them. If so, whats the worst case scenario? You have those users browsing the mobile version of your site, and that's a good thing.

其他回答

在检测移动浏览器上有开源脚本,可以在Apache、ASP、ColdFusion、JavaScript和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上的这篇文章,了解一些好例子

适用于安卓,IPHONE, IPAD,黑莓,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>

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

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

这个示例使用php函数进行用户代理检测,并提供了允许用户声明站点版本的首选项的额外好处,这通常不是基于他们的浏览器或设备类型的默认版本。这是通过cookie完成的(在服务器端使用php而不是javascript进行维护)。

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

希望你喜欢!

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

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

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