詳解JS判斷頁面是在手機(jī)端還是在PC端打開的方法
我們想要的效果是pc文件和mobile文件統(tǒng)一入口,適配不同的設(shè)備。
先看看項(xiàng)目的目錄:

在index.html里面配置js控制選擇那一個(gè)文件夾下的文件就可以了。
我們要利用:Navigator 對象,Navigator 對象包含有關(guān)瀏覽器的信息。
index.html很簡單,直接上碼吧:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<script type="text/javascript">
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
//跳轉(zhuǎn)移動(dòng)端頁面
window.location. rel="external nofollow" rel="external nofollow" ;
} else {
//跳轉(zhuǎn)pc端頁面
window.location. rel="external nofollow" rel="external nofollow" ;
}
}
browserRedirect();
</script>
</head>
<body>
</body>
</html>
補(bǔ)充,感覺之前代碼太冗余了,現(xiàn)在用正則來優(yōu)化了一下:
<script type="text/javascript">
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {
//跳轉(zhuǎn)移動(dòng)端頁面
window.location. rel="external nofollow" rel="external nofollow" ;
} else {
//跳轉(zhuǎn)pc端頁面
window.location. rel="external nofollow" rel="external nofollow" ;
}
}
browserRedirect();
</script>


以上所述是小編給大家介紹的JS判斷頁面是手機(jī)端還是在PC端打開的方法詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
2007/12/23更新創(chuàng)意無限,簡單實(shí)用(javascript log)
在javascript開發(fā)過程中,如果總是使用alert的方式調(diào)試程序,在某些簡單的程序中是可行的. 但是在通常的項(xiàng)目很復(fù)雜,這種方式已經(jīng)很難滿足,企業(yè)級開發(fā)的需要。2007-12-12
微信公眾平臺(tái)開發(fā)教程(四) 實(shí)例入門:機(jī)器人回復(fù)(附源碼)
本篇文章主要介紹了微信公眾平臺(tái)開發(fā)機(jī)器人,可以實(shí)現(xiàn)簡單對話和查詢天氣等,有需要的可以了解一下。2016-12-12
基于jquery ajax的多文件上傳進(jìn)度條過程解析
這篇文章主要介紹了基于jquery ajax的多文件上傳進(jìn)度條過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
ZeroClipboard.js使用一個(gè)flash復(fù)制多個(gè)文本框
這篇文章主要為大家詳細(xì)介紹了ZeroClipboard.js使用一個(gè)flash復(fù)制多個(gè)文本框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
Js中parentNode,parentElement,childNodes,children之間的區(qū)別
這篇文章主要是對Js中parentNode,parentElement,childNodes,children的區(qū)別進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11

