2011-12-08 139 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項目是你最好的選擇。