移动检测和支持旧设备

时间:2011-12-08 12:18:31

标签: mobile jquery-mobile mobile-website joomla1.7

当用户使用旧手机(不是智能手机和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站点,而不是移动设备。

3 个答案:

答案 0 :(得分:2)

以下是3种检测移动设备的方法......

  1. 社区支持的浏览器通过 WURFL project
  2. 进行嗅探
  3. 自定义浏览器嗅探(您现在正在做的事情,虽然不被视为最佳做法但很常见)
  4. 通过功能支持进行检测。
  5. 选项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项目是您最好的选择。

答案 1 :(得分:0)

这是我在我的代码中用来检查手机的内容

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

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

答案 2 :(得分:0)

手机是否支持JavaScript? 如果没有,您可以使用此解决方法(如果它不影响您的网站的用户体验):

  1. 创建一个覆盖整个网站的div-container
  2. 输入说明(例如“此网站提供移动版本”)和链接
  3. 如果不是移动设备或支持的
  4. ,请使用JavaScript隐藏div