使用device.js检测设备并实现不同设备展示不同网页

现在很多时候会用@media来控制页面在不同分辨率的设备商展示不同效果，但是有些时候想在直接在PC上展示一个做好的页面，在mobile展示另一个页面。这个时候可以借助device.js来检测设备，然后打开不同的页面（device.js 是一个可以用来检测设备，操作系统和方向的js库）。当然这种做法需要一次跳转。

 

假设有个m.html想用于mobile端展示，pc.html想用于pc端展示。这个时候可以用index.html作为入口，在<head>内引入device.js来检测设备，然后用js来实现跳转。

当设备为Mobile和tablet的时候展示m.html

否则展示pc.html

 

附官方网站：http://matthewhudson.me/projects/device.js/

实现代码如下：

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>responsive demo</title>
  <script src="device.js"></script>
</head>

<body style="margin: auto; position: absolute; width:100%; height: 100%">

<script>
 var isMobile = device.mobile(), //手机
            isTable = device.tablet(), //平板
isDesktop = device.desktop(); //电脑
if(isMobile || isTable){ window.open("m.html","_self"); } else{ window.open("pc.html","_self"); } </script> </body> </html>

其中device.js代码如下：http://www.xuebuyuan.com/2160950.html

posted @ 2017-02-26 23:04  stma  阅读(221)  评论(0)    收藏  举报