js如何判斷用戶是在PC端和還是移動端訪問
如果需要對移動終端進(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 頭部的值。頭信息中有一個 User-Agent,它的作用是告訴服務(wù)器,用戶客戶端是什么瀏覽器,以及操作系統(tǒng)的信息的。使用正則表達(dá)式進(jìn)行user-agent值的獲取。和本地的值進(jìn)行判斷,這個匹配值可以是移動操作系統(tǒng)例如Android,ios,也可以為瀏覽器的名稱。有匹配項則跳轉(zhuǎn),否則則不會跳轉(zhuǎn),直接進(jìn)入PC端首頁。
具體的代碼實現(xiàn),我們?yōu)榱颂岣呔W(wǎng)站的可移植性,使用了JavaScript腳本語言。使用此技術(shù)的好處在筆者看來有兩點
1:可以提高網(wǎng)站的可移植性,如果在此后的Web項目中,我們團(tuán)隊需要再一次加入移動終端的效果,就可以很輕松的引入這部分的JS代碼,進(jìn)行判斷。提高以后的工作效率。
2:第二點是便于Web程序可以在不用的界面加載,是否引入這部分移動終端的判斷代碼。
具體實現(xiàn):
我們把判斷訪問的腳本抽離,如果哪個頁面需要進(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>}
相關(guān)文章
跟我學(xué)習(xí)javascript的call(),apply(),bind()與回調(diào)
跟我學(xué)習(xí)javascript的call(),apply(),bind()與回調(diào),感興趣的小伙伴們可以參考一下2015-11-11bootstrap模態(tài)框跳轉(zhuǎn)到當(dāng)前模板頁面 框消失了而背景存在問題的解決方法
這篇文章主要介紹了bootstrap模態(tài)框跳轉(zhuǎn)到當(dāng)前模板頁面,框消失了,而背景依然存在問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實現(xiàn)
這篇文章主要介紹了手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實現(xiàn),感興趣的小伙伴們可以參考一下2016-08-08JS實現(xiàn)逐頁將PDF文件轉(zhuǎn)為圖片格式
這篇文章主要為大家分享了如何通過前端js將pdf文件轉(zhuǎn)為圖片格式,并且支持翻頁預(yù)覽、以及圖片打包下載,文中的示例代碼簡潔易懂,需要的可以參考一下2023-05-05原生javascript如何實現(xiàn)共享onload事件
這篇文章主要介紹了原生javascript如何實現(xiàn)共享onload事件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07鼠標(biāo)點擊input,顯示瞬間的邊框顏色,對之修改與隱藏實例
下面小編就為大家?guī)硪黄髽?biāo)點擊input,顯示瞬間的邊框顏色,對之修改與隱藏實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-12-12JavaScript空數(shù)組的every()方法實踐
every()方法用于檢測數(shù)組中的所有元素是否都滿足指定條件, 本文主要介紹了JavaScript空數(shù)組的every()方法實踐,具有一定的參考價值,感興趣的可以了解一下2024-03-03微信小程序?qū)崿F(xiàn)圖片上傳、刪除和預(yù)覽功能的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片上傳、刪除和預(yù)覽功能的方法,涉及微信小程序界面布局、事件響應(yīng)及圖片操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-12-12layui中select,radio設(shè)置不生效的解決方法
今天小編就為大家分享一篇layui中select,radio設(shè)置不生效的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09