使用js实现不同终端引入不同的html页面css样式js等
我在工作中刚遇到一个关于一个主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>
好了，这就是全部过程，是不是感觉很简单。不用怀疑，就是这么简单。
结束语：
感谢阅读，欢迎交流！
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，以避免陈旧错误知识的误导。
