移动检测和支持旧设备

如何识别用户使用旧手机(不是智能手机和iphone)访问网站。我正在使用jQuery-Mobile与Joomla 1.7。

我使用这个脚本:

<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|windowssce|palm/i.test(navigator.userAgent.toLowerCase()));  
if (mobile) {  
    document.location = "http://mysite,com/mobile";  
}  
// ]]></script>

网站适用于HTC, iPhone, Nokia等。我的朋友测试了一些爱立信(不知道型号)，但网站不能工作。

这里有3种方法来检测移动…

社区支持的浏览器嗅探WURFL项目
自定义浏览器嗅探(你现在所做的，很常见，但不被认为是最佳实践)
通过特性支持检测。

选项1:如果你真的想支持非智能手机，它可能会给你最好的整体支持。这是在后端通过根据社区定期更新的已知设备的大型数据库检查用户代理来完成的。因为它不依赖于JavaScript，所以它可能是支持所有人的最佳方式。

选项2:使用非智能手机的人知道在他们身上上网很糟糕。因此，他们不太可能在网络上使用它们。作为流量的百分比，在JavaScript中使用检测将错过的人的百分比可能不值得讨论。就我所看到的网站而言，黑莓5或更早版本的网站使用率不到2%，而非Android、iOS或黑莓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项目是你最好的选择。

手机支持JavaScript吗?如果没有，你可以使用这个解决方案(如果它不影响你的网站的用户体验):

创建div-container，覆盖整个站点
在描述中键入(例如:"本网站提供手机版")和链接
用JavaScript隐藏div，如果它不是一个移动设备或支持的一个

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

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

基本上你检查客户端的屏幕分辨率。如果它真的很低，你就重定向到手机。如果您喜欢，可以将参数更改为更小的屏幕。

相关内容

最新更新

热门标签：