移动检测和支持旧设备

Question

当用户使用一些旧手机（不是智能手机和 iPhone）访问网站时如何识别。我在 Joomla 1.7 中使用 jQuery-Mobile。

我使用这个脚本：

<script type="text/javascript">// <![CDATA[  
var mobile = (/acer|alcatel|audiovox|avantgo|blazer|cdm|digital paths|elaine|epoc|handspring|iemobile|kyocera|lg|midp|mmp|mobile|motorola|nec|o2|openwave|opera mini|operamini|opwv|palm|panasonic|pda|phone|playstation portable|pocket|psp|qci|sagem|sanyo|sec|sendo|sharp|smartphone|symbian|telit|tsm|up-browser|up.browser|up.link|vodafone|wap|windows ce|xiino|ericsson|sonyericsson|iphone|ipod|android|blackberry|samsung|nokia|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
if (mobile) {  
    document.location = "http://mysite,com/mobile";  
}  
// ]]></script>

该网站适用于 HTC、iPhone、诺基亚等。 我的朋友用一些爱立信测试过（不知道型号），但网站无法正常工作。它只显示 PC 网站，而不是移动网站。

Answer 1

这里有 3 种检测移动设备的方法...

1. 社区支持的浏览器通过 WURFL project 进行嗅探
2. 自定义浏览器嗅探（您现在正在做的事情，虽然不被认为是最佳做法但很常见）
3. 通过功能支持进行检测。

选项 1：如果您真的希望支持非智能手机，可能会为您提供最佳的整体支持。这是在后端通过检查用户代理与社区定期更新的已知设备的庞大数据库来完成的。由于它不依赖于 JavaScript，因此它可能是绝对支持所有人的最佳方式。

选项 2：使用非智能手机的人都知道用他们上网很糟糕。因此，他们不太可能将它们用于网络。作为流量的百分比，在 JavaScript 中使用检测将丢失的人的百分比可能不值得谈论。对于我所看到的网站，在 BlackBerry 5 或更早版本上它不到 2%，而在其他非 Android、iOS 或 BlackBerry 6+ 上不到 1%。我以前支持过这种检测方法，这就是我的做法。请注意，如果屏幕很小 (isUnknownMobile)，则允许任何基于 webkit 的选项。这是对未来进行验证的尝试，直到这样的平台能够获得足够的吸引力以被调用。

<script>
    var agent = navigator.userAgent; 
    var isWebkit = (agent.indexOf("AppleWebKit") > 0);
    var isIPad = (agent.indexOf("iPad") > 0);
    var isIOS = (agent.indexOf("iPhone") > 0 || agent.indexOf("iPod") > 0);
    var isAndroid = (agent.indexOf("Android")  > 0);
    var isNewBlackBerry = (agent.indexOf("AppleWebKit") > 0 && agent.indexOf("BlackBerry") > 0);
    var isWebOS = (agent.indexOf("webOS") > 0);
    var isWindowsMobile = (agent.indexOf("Windows Phone OS") > 0);
    var isSmallScreen = (screen.width < 767 || (isAndroid && screen.width < 1000));
    var isUnknownMobile = (isWebkit && isSmallScreen);
    var isMobile = (isIOS || isAndroid || isNewBlackBerry || isWebOS || isWindowsMobile || isUnknownMobile);
    var isTablet = (isIPad || (isMobile && !isSmallScreen));
    function mobileRedirect(mobileView){location.replace((mobileView)?mobileView:"/mobile/index.jsp");}
</script>

选项 3：如果客户端是移动的，特征检测可能是一种更加面向未来的测试方式。考虑使用 Modernizr Project 查看支持的功能。例如，如果设备有一个小屏幕并支持画布，或者如果它有一个触摸界面，它们可能是移动的。同样，这是基于前端的检测并依赖于 JavaScript。

如果您真的希望重定向每个移动用户，WURFL 项目是您的最佳选择。

Answer 2

手机是否支持 JavaScript？ 如果不是，您可以使用此解决方法（如果它不影响您网站的用户体验）：

1. 创建一个覆盖整个网站的 div 容器
2. 输入说明（例如“此网站提供移动版本”）和链接
3. 如果不是移动设备或受支持的设备，请使用 JavaScript 隐藏 div

Answer 3

这是我在代码中用来检查手机的东西

  function checkScreen()
  {
    if (screen.width <= 1000 && screen.height <= 1000)
      window.location.replace("MobileURL");
    else
      window.location.replace("URL");
  }

基本上你检查客户端的屏幕资源。如果它真的很低，你只需重定向到手机。如果您愿意，您可以将参数更改为更小的屏幕。