2011-12-08 47 views
2

如何识别当用户使用某些旧手机(而非智能手机和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|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); 
if (mobile) { 
    document.location = "http://mysite,com/mobile"; 
} 
// ]]></script> 

网站与HTC,iPhone,诺基亚等效果很好。 我的朋友测试了一些爱立信(不知道模型),但网站不会工作。它只显示PC站点,不显示移动设备。

回答

0

手机是否支持JavaScript? 如果没有,你可以使用此解决方案(如果它不影响你的网站的UX):

  1. 创建一个div容器,这是覆盖在整个网站
  2. 键入描述(例如“这个网站提供了手机版“)和链路
  3. 隐藏的JavaScript股利,如果它不能在移动设备或支持的一个
+0

不知道支持。 – user869470

+1

为什么不在第一页的PHP中检查浏览器或操作系统并将用户重定向到您的移动网站? – Jazzschmidt

0

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

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

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

+0

不会工作。我只需要脚本标记之间的这段代码? – user869470

+1

我强烈建议,以避免这种屏幕分辨率检查,以确定移动浏览器,这是完全不是未来的证明... – Leon

+0

但如何显示移动网站,当其不支持JavaScript的移动设备? – user869470

2

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

  1. 社区支持的浏览器通过WURFL project
  2. 自定义浏览器嗅探(你现在正在做什么,相当普遍虽然不是最好的做法)
  3. 通过功能支持检测嗅探。

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

选项2:非智能手机上的人都知道他们的网上冲浪很糟糕。他们因此不太可能将它们用于网络。作为流量的百分比,通过在JavaScript中使用检测而丢失的人数百分比可能不值得讨论。对于我所看到的网站,黑莓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项目是你最好的选择。