zoukankan      html  css  js  c++  java
  • 使用js插件进行设备检测

    一、分析新浪网是怎么做的

       

      如新浪网有两种版本,一种是pc版,存放在www.sina.com.cn这个服务器上;另外一种是手机版,存放在www.sina.cn这个服务器上

      原理是当用户输入网址www.sina.com.cn的时候,检测用户的设备,如果用户用的是pc,那么留在原地,如果检测用户的设备是手机访问的就跳转到www.sina.cn这个网址去(这样做是因为用户不可能记得住一个网站的那么多网址)

      

    二、怎么检测设备

      1、就要用到device.js库(不依赖Jquery),这是一种最简单的一种方法:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>检测设备</title>
    <!--首先引入device.min.js这个js文件-->
    <script type="text/javascript" src="device.min.js"></script>
    </head>
    
    <body>
        <h1 id="title"></h1>
        <script type="text/javascript">
            var myh1 = document.getElementById("title");
            if(device.mobile()){        //表示判断设备是否是手机
                myh1.innerHTML = "I'm mobile";
            }else if(device.ipad()){    //表示判断设备是否是ipad
                myh1.innerHTML = "I'm ipad";
            }else{
                myh1.innerHTML = "I'm pc";
            }
        </script>
    </body>
    </html>
      device.ipad()       返回一个布尔值(true,false),表示用户的设备是否是iPad
      device.portrait()
    返回一个布尔值(true,false),表示检测设备是否是竖直的
      device.landscape() 
    返回一个布尔值(true,false),表示检测设备是否是水平
      device.mobile() 返回一个布尔值(true,false),表示检测设备是否是手机
      device.ipad() 返回一个布尔值(true,false),表示检测设备是否是ipad
      device.ipod()      检测用户设备是否是 ipod touch
      device.iphone() 返回一个布尔值(true,false),表示检测设备是否是iPhone
      device.android() 返回一个布尔值(true,false),表示检测设备是否是Android手机
      device.tablet() 返回一个布尔值(true,false),表示检测设备是否是大屏手机(7寸以上);
      device.androidTablet()         检测用户设备是否是安卓大屏
      device.blackberryTablet()        检测用户设备是否是黑莓




      2、当检测完设备之后,如果用户使用的是手机设备或者其他设备那么怎么实现跳转呢?
        window.location="URL地址"
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>检测设备,进行跳转</title>
    <script type="text/javascript" src="device.min.js"></script>
    <script type="text/javascript">
        //在读下面的程序这里千万不要写window.onload = funciton(){}
        if(device.mobile()){
            window.location="手机网站的网址";//这里当程序读到这里时,如果检测到设备是手机,就直接跳转了,不
        }//else if.....如果网站还做了其他的设备的版本那么可以继续判断
    </script>
    </head>
    
    <body>
        <h1 id="title"></h1>
    </body>
    </html>
      千万不要写在window.onload = funciton(){}中,因为这样表示的是延时调用

      我们必须要制作两套站:pc站,手机站。存放在不同的服务器或者文件夹中。通过设备检测来实现自动跳转。也就是说对于普通的用户来说,没有必要去记忆两个网址,只需要记忆一个pc网址即可。
      手机中直接输入这个pc网址,比如www.sina.com.cn这个网址,javascript设备检测来实现跳转
    
    
  • 相关阅读:
    Vue.Draggable实现拖拽效果(快速使用)
    1.从面向过程到面向对象的过渡
    微信支付流程
    2.js原型的基本概念
    POST和GET请求的区别
    vue-router2.0
    vue列表渲染,以及鼠标点击改变样式的问题
    复杂数组结构的深拷贝
    高德地图将字符串地址转为经纬度的一个demo
    数组对象排序
  • 原文地址:https://www.cnblogs.com/LO-ME/p/3724548.html
Copyright © 2011-2022 走看看