我在工作中剛遇到一個關於一個主html在不同終端下引入不同的html頁面css樣式js等的問題，下面我把它的實現方法分享給大家。
分別新建移動端和PC端需要的html文件(這里就以html文件格式命名)
mobile-index.html代碼如下：
<h1>這是移動端頁面</h1>
pc-index.html代碼如下：
<h1>這是pc端頁面</h1>
樣式文件:
mobile.css代碼如下：
body {
background-color: #0f0ff0;
}
h1{
color: #0ff;
}
pc.css代碼如下：
body {
background-color: #ff0;
}
h1 {
color: #f00;
}
最后就是重點了：
新建一個index.html文件代碼如下：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>一個頁面實現pc端和移動端訪問不同頁面</title> 7 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 8 </head> 9 <body> 10 <script type="text/javascript"> 11 /*根據不同的客戶端(這里指移動端和pc端)引入樣式*/ 12 var includeLinkStyle = function (url) { 13 var link = document.createElement('link'); 14 link.rel = 'stylesheet'; 15 link.type = 'text/css'; 16 link.href = url; 17 document.getElementsByTagName('head')[0].appendChild(link); 18 }; 19 var browserRedirect = function () { 20 /* 判斷是pc端還是移動端 網上有很多，我只用其中一種演示*/ 21 var sUserAgent = navigator.userAgent.toLowerCase(); 22 var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; 23 var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; 24 var bIsMidp = sUserAgent.match(/midp/i) == "midp"; 25 var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; 26 var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; 27 var bIsAndroid = sUserAgent.match(/android/i) == "android"; 28 var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; 29 var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; 30 /* 根據不同的客戶端引入樣以及加載頁面 */ 31 if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { 32 console.log("phone"); 33 /*includeLinkStyle("樣式地址");*/ 34 includeLinkStyle("mobile.css"); 35 $('body').load('mobile-index.html'); 36 } else { 37 console.log("pc"); 38 includeLinkStyle("pc.css"); 39 $('body').load('pc-index.html'); 40 } 41 }; 42 browserRedirect(); 43 </script> 44 </body> 45 </html>
好了，這就是全部過程，是不是感覺很簡單。不用懷疑，就是這么簡單。
結束語：
感謝閱讀，歡迎交流！
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，以避免陳舊錯誤知識的誤導。