js如何判斷用戶是在PC端和還是移動端訪問
更新時(shí)間:2014年04月24日 16:05:56 作者:
這篇文章主要介紹了js如何判斷用戶是在PC端和還是移動端訪問,需要的朋友可以參考下
最近一直在忙我們團(tuán)隊(duì)的項(xiàng)目“咖啡之翼”,在這個(gè)項(xiàng)目中,我們?yōu)橐苿悠脚_提供了一個(gè)優(yōu)秀的體驗(yàn)。伴隨Android平臺的紅火發(fā)展。不僅帶動國內(nèi)智能手機(jī)行業(yè),而且許多國內(nèi)開發(fā)者也開始投身于Android移動終端的大浪潮中。如果很多互聯(lián)網(wǎng)大浪潮你錯(cuò)過了。那么這個(gè)Android浪潮你絕對不能錯(cuò)過。目前我們?yōu)椤翱Х戎怼币呀?jīng)開發(fā)了移動終端以及安卓客戶端,大家使用Android或者IOS操作系統(tǒng)的手機(jī),直接訪問域名www.sygxy.cn即可觀看移動終端效果。同時(shí)Android客戶端已經(jīng)上架到騰訊“應(yīng)用寶”和“百度手機(jī)助手”等應(yīng)用商城。大家可以直接搜索“咖啡之翼”進(jìn)行下載。在沒有任何的推廣的情況了,僅僅上架一周,已經(jīng)擁有超過100+的下載量。
如果需要對移動終端進(jìn)行優(yōu)化,必須要做的就是,判斷客戶機(jī)的訪問設(shè)備是什么。通過判斷的結(jié)果,返回不能的域名地址,繼而加載不同的CSS文件。
我們使用的判斷方式是通過user-agent值,來進(jìn)行判斷。使用javascript框架中的Navigator對象的userAgent屬性。navigator 對象沒有公開標(biāo)準(zhǔn),不過現(xiàn)在市面上所有瀏覽器都支持該對象。使用userAgent屬性返回由客戶機(jī)發(fā)送服務(wù)器的 user-agent 頭部的值。頭信息中有一個(gè) User-Agent,它的作用是告訴服務(wù)器,用戶客戶端是什么瀏覽器,以及操作系統(tǒng)的信息的。使用正則表達(dá)式進(jìn)行user-agent值的獲取。和本地的值進(jìn)行判斷,這個(gè)匹配值可以是移動操作系統(tǒng)例如Android,ios,也可以為瀏覽器的名稱。有匹配項(xiàng)則跳轉(zhuǎn),否則則不會跳轉(zhuǎn),直接進(jìn)入PC端首頁。
具體的代碼實(shí)現(xiàn),我們?yōu)榱颂岣呔W(wǎng)站的可移植性,使用了JavaScript腳本語言。使用此技術(shù)的好處在筆者看來有兩點(diǎn)
1:可以提高網(wǎng)站的可移植性,如果在此后的Web項(xiàng)目中,我們團(tuán)隊(duì)需要再一次加入移動終端的效果,就可以很輕松的引入這部分的JS代碼,進(jìn)行判斷。提高以后的工作效率。
2:第二點(diǎn)是便于Web程序可以在不用的界面加載,是否引入這部分移動終端的判斷代碼。
具體實(shí)現(xiàn):
我們把判斷訪問的腳本抽離,如果哪個(gè)頁面需要進(jìn)行客戶終端的判斷,我們就直接在頁面使用<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>}
如果需要對移動終端進(jìn)行優(yōu)化,必須要做的就是,判斷客戶機(jī)的訪問設(shè)備是什么。通過判斷的結(jié)果,返回不能的域名地址,繼而加載不同的CSS文件。
我們使用的判斷方式是通過user-agent值,來進(jìn)行判斷。使用javascript框架中的Navigator對象的userAgent屬性。navigator 對象沒有公開標(biāo)準(zhǔn),不過現(xiàn)在市面上所有瀏覽器都支持該對象。使用userAgent屬性返回由客戶機(jī)發(fā)送服務(wù)器的 user-agent 頭部的值。頭信息中有一個(gè) User-Agent,它的作用是告訴服務(wù)器,用戶客戶端是什么瀏覽器,以及操作系統(tǒng)的信息的。使用正則表達(dá)式進(jìn)行user-agent值的獲取。和本地的值進(jìn)行判斷,這個(gè)匹配值可以是移動操作系統(tǒng)例如Android,ios,也可以為瀏覽器的名稱。有匹配項(xiàng)則跳轉(zhuǎn),否則則不會跳轉(zhuǎn),直接進(jìn)入PC端首頁。
具體的代碼實(shí)現(xiàn),我們?yōu)榱颂岣呔W(wǎng)站的可移植性,使用了JavaScript腳本語言。使用此技術(shù)的好處在筆者看來有兩點(diǎn)
1:可以提高網(wǎng)站的可移植性,如果在此后的Web項(xiàng)目中,我們團(tuán)隊(duì)需要再一次加入移動終端的效果,就可以很輕松的引入這部分的JS代碼,進(jìn)行判斷。提高以后的工作效率。
2:第二點(diǎn)是便于Web程序可以在不用的界面加載,是否引入這部分移動終端的判斷代碼。
具體實(shí)現(xiàn):
我們把判斷訪問的腳本抽離,如果哪個(gè)頁面需要進(jìn)行客戶終端的判斷,我們就直接在頁面使用<script></script>引入腳本程序,具體判斷代碼如下:
復(fù)制代碼 代碼如下:
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>}
相關(guān)文章
DLL+ ActiveX控件+WEB頁面調(diào)用例子
因項(xiàng)目需要,開始學(xué)習(xí)并研究VC、DLL及ActiveX控件,網(wǎng)上資料找了很多,但沒一個(gè)可用的或者說沒一個(gè)例子可理解并運(yùn)行的。沒辦法,自己研究吧。功夫不負(fù)有心人,終有小成了,呵呵,現(xiàn)在把自己學(xué)習(xí)總結(jié)了一下,獻(xiàn)給需要的人。2010-08-08
權(quán)威JavaScript 中的內(nèi)存泄露模式
權(quán)威JavaScript 中的內(nèi)存泄露模式...2007-08-08
小程序中設(shè)置緩存過期的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序中設(shè)置緩存過期的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
javascript自動切換焦點(diǎn)控制效果完整實(shí)例
這篇文章主要介紹了javascript自動切換焦點(diǎn)控制效果的方法,結(jié)合完整實(shí)例形式分析了JavaScript響應(yīng)鍵盤按鍵控制表單輸入框的焦點(diǎn)切換功能,需要的朋友可以參考下2016-02-02

