JS判断页面是在手机端还是在PC端打开的方法

方法一(判断终端设备):

php文件:

$addr = "http://".$_SERVER['SERVER_NAME']."/Home/Index/index_m.html";
$this->assign('addr',$addr);

js文件:

<script type="text/javascript">
  $(document).ready(function(){
  var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
  var browser = navigator.userAgent.toLowerCase();
  var isMobile = false;
  var addr = $("#addr").val();
  for (var i=0; i<mobileAgent.length; i++){ if (browser.indexOf(mobileAgent[i])!=-1){ isMobile = true;
  //alert(mobileAgent[i]);
   　　location.href = addr;
      break; } }
     });
  </script>

html文件:

<input type="hidden" name="addr" id="addr" value="{$addr}">

 

 

 

 

 

方法二(判断终端设备):

js文件:

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
     window.location.href = "https://www.baidu.com/";
 } else {
     window.location.href = "http://news.baidu.com/";
 }

实际上就是利用正则去判断 navigator.useragent 是否含有 Android/webOs/iphone 等字符串，并且利用修饰符 "i" 做了不区分大小写，然后用正则的方法 test 去判断是否满足。

 

 

 

 

 

 

方法三(根据屏幕分辨率跳转手机端页面):

如果一个页面需要PC和手机端，那么可能要做两个页面分别对应PC和手机端。假设PC端的页面为index.html，手机端的页面为mobile.html，且两文件都在相同目录路径中，那么关于前端页面排版布局适应性的相关代码如下：

index.html

 1     <!-- 页面跳转 -->
 2     <script type="text/javascript">
 3         var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
 4         if (oWidth > 1200) {} else {
 5             window.location.href = "mobile.html";
 6         }
 7 
 8         //当对浏览器窗口调整大小时
 9         window.addEventListener("resize", function () {
10             var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
11             if (oWidth > 1200) {} else {
12                 window.location.href = "mobile.html";
13             }
14         }, false);
15     </script>

 

 

mobile.html

 1 <!-- 页面跳转 -->
 2 <script type="text/javascript">
 3         var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
 4         if (oWidth < 1200) {} else {
 5             window.location.href = "index.html";
 6         }
 7 
 8         //在用户旋转移动设备时
 9         window.addEventListener("orientationchange", function () {
10             var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
11 
12             if (oWidth < 1200) {
13 
14             } else {
15                 window.location.href = "index.html";
16             }
17         }, false);
18 
19         //当对浏览器窗口调整大小时
20         window.addEventListener("resize", function () {
21             var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
22             if (oWidth < 1200) {} else {
23                 window.location.href = "index.html";
24             }
25         }, false);
26 </script>

 

这样即可实现根据屏幕大小来动态改变显示哪个html文件页面。