首頁  >  文章  >  web前端  >  js如何判斷使用者是在PC端和還是行動端存取_javascript技巧

js如何判斷使用者是在PC端和還是行動端存取_javascript技巧

WBOY
WBOY原創
2016-05-16 16:51:111357瀏覽

最近一直在忙我們團隊的專案“咖啡之翼”,在這個專案中,我們為移動平台提供了一個優秀的體驗。伴隨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(function uaredirect(function uaredirect(function uaredirect()
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)
   {
   }
}
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn