這篇文章將為大家詳細(xì)講解有關(guān)JS怎么實(shí)現(xiàn)網(wǎng)站中PC端和手機(jī)端自動(dòng)識(shí)別并跳轉(zhuǎn)對(duì)應(yīng)的代碼，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為瑪沁等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及瑪沁網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、瑪沁網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

1.  代碼場(chǎng)景：

描述：在項(xiàng)目中，一般我們會(huì)使用響應(yīng)式布局的方式或者借助bootstrap等插件來做響應(yīng)式的網(wǎng)站。但是根據(jù)業(yè)務(wù)的需求，手機(jī)端可能會(huì)在功能上精簡(jiǎn)很多，我們也會(huì)寫兩套代碼，分別用來實(shí)現(xiàn)PC端和手機(jī)端的功能。此時(shí)，就存在一個(gè)問題。項(xiàng)目在部署的時(shí)候只會(huì)使用一個(gè)地址，不會(huì)針對(duì)手機(jī)和PC端代碼分別進(jìn)行部署。這個(gè)時(shí)候就需要我們通過去識(shí)別視口分辨率的大小，來自動(dòng)去跳轉(zhuǎn)對(duì)應(yīng)的代碼。

2. 實(shí)現(xiàn)方式：

目前網(wǎng)上有很多的方法用來實(shí)現(xiàn)PC端和手機(jī)端的代碼跳轉(zhuǎn)，但我只用了一種實(shí)現(xiàn)方式。其他的暫時(shí)還沒有嘗試，希望可以跟大家學(xué)到更多的解決方案。在此特別感謝<<--老蔣部落-->>的方法給予了我很大的幫助。

此處貼出當(dāng)前的JS代碼：

<script type="text/javascript">
 
 function mobilePcRedirect() {
 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) {
  window.location.href= '手機(jī)端跳轉(zhuǎn)頁面URL';
 } else {
  window.location= 'PC端跳轉(zhuǎn)頁面URL';
 }
 };
 
 mobilePcRedirect();
 
</script>

將此方法分別寫在手機(jī)端和PC端公共的Common.js中，然后在對(duì)應(yīng)位置寫入對(duì)應(yīng)的路徑即可。

例如：手機(jī)端公共JS中代碼如下

// 實(shí)現(xiàn)網(wǎng)站自動(dòng)跳轉(zhuǎn)電腦PC端與手機(jī)端不同頁面
function mobilePcRedirect() {
 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) {
 console.log("手機(jī)端跳轉(zhuǎn)頁面URL");
 } else {
 console.log("PC端跳轉(zhuǎn)頁面URL"); 
    // 注：此時(shí)寫入的是PC端首頁跳轉(zhuǎn)路徑
   window.location.href = getBasePath() + "/education/new_index.html";
 }
};
mobilePcRedirect();

反之，PC端公共JS中同樣的寫法即可。

3. 拓展內(nèi)容(如何獲取項(xiàng)目的根路徑？)

獲取項(xiàng)目名稱:

/**
 * 獲取項(xiàng)目名稱 如：/video_learning
 **/
 
function getProjectName() {
 var strPath = window.document.location.pathname;
 var postPath = strPath.substring(0,strPath.substr(1).indexOf('/')+1);
 return postPath;
}

獲取項(xiàng)目全路徑:

/**
 * 獲取項(xiàng)目全路徑 如：http://localhost:8080/video_learning
 * */
 
function getBasePath(){
 //獲取當(dāng)前網(wǎng)址
 var curWwwPath=window.document.location.href;
 
 //獲取主機(jī)地址之后的目錄
 var pathName=window.document.location.pathname;
 var pos=curWwwPath.indexOf(pathName);
 
 //獲取地址到端口號(hào)
 var localhostPath=curWwwPath.substring(0,pos);
 
 //項(xiàng)目名
 var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); 
 return (localhostPath+projectName);
}

關(guān)于“JS怎么實(shí)現(xiàn)網(wǎng)站中PC端和手機(jī)端自動(dòng)識(shí)別并跳轉(zhuǎn)對(duì)應(yīng)的代碼”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站題目：JS怎么實(shí)現(xiàn)網(wǎng)站中PC端和手機(jī)端自動(dòng)識(shí)別并跳轉(zhuǎn)對(duì)應(yīng)的代碼
URL鏈接：http://chinadenli.net/article42/ggppec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、ChatGPT、移動(dòng)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)