1. 程式人生 > >js如何判斷使用者是在pc端和還是移動端訪問

js如何判斷使用者是在pc端和還是移動端訪問

 

 

js如何判斷使用者是在pc端和還是移動端訪問

來源:A5技術交流 作者: wofa 時間:2014-04-25收藏本頁 最近一直在忙我們團隊的專案“咖啡之翼”,在這個專案中,我們為移動平臺提供了一個優秀的體驗。伴隨android平臺的紅火發展。不僅帶動國內智慧手機行業,而且許多國內開發者也開始投身於android移動終端的大浪潮中。如果很多網際網路大浪潮你錯過了。那麼這個android浪潮你絕對不能錯過。目前我們為“咖啡之翼”已經開發了移動終端以及安卓客戶端,大家使用android或者ios作業系統的手機,直接訪問域名www.sygxy.cn即可觀看移動終端效果。同時android客戶端已經上架到騰訊“應用寶”和“百度手機助手”等應用商城。大家可以直接搜尋“咖啡之翼”進行下載。在沒有任何的推廣的情況了,僅僅上架一週,已經擁有超過100+的下載量。 

如果需要對移動終端進行優化,必須要做的就是,判斷客戶機的訪問裝置是什麼。通過判斷的結果,返回不能的域名地址,繼而載入不同的css檔案。 

我們使用的判斷方式是通過user-agent值,來進行判斷。使用javascript框架中的navigator物件的useragent屬性。navigator 物件沒有公開標準,不過現在市面上所有瀏覽器都支援該物件。使用useragent屬性返回由客戶機發送伺服器的 user-agent 頭部的值。頭資訊中有一個 user-agent,它的作用是告訴伺服器,使用者客戶端是什麼瀏覽器,以及作業系統的資訊的。使用正則表示式進行user-agent值的獲取。和本地的值進行判斷,這個匹配值可以是移動作業系統例如android,ios,也可以為瀏覽器的名稱。有匹配項則跳轉,否則則不會跳轉,直接進入pc端首頁。 

具體的程式碼實現,我們為了提高網站的可移植性,使用了javascript指令碼語言。使用此技術的好處在筆者看來有兩點 

1:可以提高網站的可移植性,如果在此後的web專案中,我們團隊需要再一次加入移動終端的效果,就可以很輕鬆的引入這部分的js程式碼,進行判斷。提高以後的工作效率。 

2:第二點是便於web程式可以在不用的介面載入,是否引入這部分移動終端的判斷程式碼。 

具體實現: 

我們把判斷訪問的指令碼抽離,如果哪個頁面需要進行客戶終端的判斷,我們就直接在頁面使用<script></script>引入指令碼程式,具體判斷程式碼如下: 
程式碼如下:

function uaredirect(f){ 
try{if( 
document.getelementbyid(bdmark)!=null){ 
return 

var b=false; 
if(arguments[1]){ 
var e=window.location.host;var a=window.location.href; 
if(issubdomain(arguments[1],e)==1){ 
f=f+/#m/+a;b=true}else{if(issubdomain(arguments[1],e)==2){f=f+/#m/+a;b=true} 
else{f=a;b=false}}} 
else{b=true}if(b){var c=window.location.hash; 
if(!c.match(fromapp)){ 
if((navigator.useragent.match(/(iphone|ipod|android|ios|windows phone)/i))){location.replace(f)}}}}catch(d)<br>   {<br>   }<br>}