JS怎么實現(xiàn)網(wǎng)站中PC端和手機端自動識別并跳轉對應的代碼
這篇文章將為大家詳細講解有關JS怎么實現(xiàn)網(wǎng)站中PC端和手機端自動識別并跳轉對應的代碼，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
為瑪沁等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及瑪沁網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都做網(wǎng)站、成都網(wǎng)站設計、瑪沁網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
1. 代碼場景：
描述：在項目中，一般我們會使用響應式布局的方式或者借助bootstrap等插件來做響應式的網(wǎng)站。但是根據(jù)業(yè)務的需求，手機端可能會在功能上精簡很多，我們也會寫兩套代碼，分別用來實現(xiàn)PC端和手機端的功能。此時，就存在一個問題。項目在部署的時候只會使用一個地址，不會針對手機和PC端代碼分別進行部署。這個時候就需要我們通過去識別視口分辨率的大小，來自動去跳轉對應的代碼。
2. 實現(xiàn)方式：
目前網(wǎng)上有很多的方法用來實現(xiàn)PC端和手機端的代碼跳轉，但我只用了一種實現(xiàn)方式。其他的暫時還沒有嘗試，希望可以跟大家學到更多的解決方案。在此特別感謝<<--老蔣部落-->>的方法給予了我很大的幫助。
此處貼出當前的JS代碼：
將此方法分別寫在手機端和PC端公共的Common.js中，然后在對應位置寫入對應的路徑即可。
例如：手機端公共JS中代碼如下
// 實現(xiàn)網(wǎng)站自動跳轉電腦PC端與手機端不同頁面
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("手機端跳轉頁面URL");
} else {
console.log("PC端跳轉頁面URL");
// 注：此時寫入的是PC端首頁跳轉路徑
window.location.href = getBasePath() + "/education/new_index.html";
}
};
mobilePcRedirect();
反之，PC端公共JS中同樣的寫法即可。
3. 拓展內(nèi)容(如何獲取項目的根路徑？)
獲取項目名稱:
/**
* 獲取項目名稱 如：/video_learning
**/
function getProjectName() {
var strPath = window.document.location.pathname;
var postPath = strPath.substring(0,strPath.substr(1).indexOf('/')+1);
return postPath;
}獲取項目全路徑:
/**
* 獲取項目全路徑 如：http://localhost:8080/video_learning
* */
function getBasePath(){
//獲取當前網(wǎng)址
var curWwwPath=window.document.location.href;
//獲取主機地址之后的目錄
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//獲取地址到端口號
var localhostPath=curWwwPath.substring(0,pos);
//項目名
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return (localhostPath+projectName);
}關于“JS怎么實現(xiàn)網(wǎng)站中PC端和手機端自動識別并跳轉對應的代碼”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
網(wǎng)頁題目：JS怎么實現(xiàn)網(wǎng)站中PC端和手機端自動識別并跳轉對應的代碼
地址分享：http://www.jiaotiyi.com/article/ggppec.html