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

　　 

　　如新浪网有两种版本，一种是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设备检测来实现跳转 
												


											
使用js插件进行设备检测的更多相关文章
	

    
								
  1. 使用three.js(webgl)搭建智慧楼宇、设备检测、数字孪生——第十三课
		
    老子云:有道无术,术尚可求,有术无道,止于术. 咱开篇引用老子的话术,也没其它意思,只是最近学习中忽有感悟,索性就写了上来. 这句话用现代辩证思维理解,这里的"道" 大抵是指方法论 ...
    
		
    2. 
						
  2. JS和css实现检测移动设备方向的变化并判断横竖屏幕
		
    这篇文章主要介绍了JS和css实现检测移动设备方向的变化并判断横竖屏幕,本文分别给出实现代码,需要的朋友可以参考下 方法一：用触发手机的横屏和竖屏之间的切换的事件  [自测可用, chrome , 手 ...
    
		
    3. 
						
  3. 发布js插件zhen-chek（用来检测数据类型）到npm上
		
    今天想到js本身是弱类型,在实际项目中很多时候需要数据类型检测.于是打算做一个判断数据类型的js插件,发布到npm上面. 基本思路: 1,输入参数,便返回数据类型,所有数据类型如下 '[object  ...
    
		
    4. 
						
  4. bootstrap实现 手机端滑动效果，滑动到下一页，jgestures.js插件
		
    bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...
    
		
    5. 
						
  5. 前端开发需要了解的JS插件
		
    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
    
		
    6. 
						
  6. js插件---video.js如何使用
		
    js插件---video.js如何使用 一.总结 一句话总结:还是要去官方网站去看英文文档.快点把英语学好啊. 1.如何快速使用这些插件(比如video.js)? 直接百度这些js如何使用就可以了,这 ...
    
		
    7. 
						
  7. JS判断访问设备、客户端操作系统类型
		
    先给出一个实例:判断windows.linux.android 复制以下代码另存为html文件即可. <html> <head> <title>判断操作系统< ...
    
		
    8. 
						
  8. Bootstrap transition.js 插件
		
    Bootstrap transition.js 插件详解   Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就 ...
    
		
    9. 
						
  9. Bootstrap入门（二十五）JS插件2：过渡效果
		
    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. iOS--支付宝环境集成
			
    1.下载支付宝SDK以及Demo https://doc.open.alipay.com/doc2/detail?treeId=54&articleId=103419&docType= ...
    
			
    2. 
						
  2. 【转】HttpServletRequestWrapper 实现xss注入
			
    这里说下最近项目中我们的解决方案,主要用到commons-lang3-3.1.jar这个包的org.apache.commons.lang3.StringEscapeUtils.escapeHtml4 ...
    
			
    3. 
						
  3. SSM配置JDBC错误: cquisition Attempt Failed!!!
			
    异常: 警告: com.mchange.v2.resourcepool.BasicResourcePool$AcquireTask@20ffa401 -- Acquisition Attempt Fa ...
    
			
    4. 
						
  4. Linux下socket通信和epoll
			
    上一篇博客用多线程实现服务端和多个客户端的通信,但是在实际应用中如果服务端有高并发的需求,多线程并不是一个好选择. 实现高并发的一种方法是IO多路复用,也就是select,poll,epoll等等.  ...
    
			
    5. 
						
  5. C# SpinWait
			
    其实SpinWait的code 非常简单,以前看过很多遍,但是从来都没有整理过,整理也是再次学习吧. 我们先看看SpinWait的一些评论或者注意点吧:如果等待某个条件满足需要的时间很短,而且不希望发 ...
    
			
    6. 
						
  6. :after伪类+content内容生成经典应用举例——张鑫旭
			
    一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容. ...
    
			
    7. 
						
  7. 一文告诉你 Event Loop 是什么？
			
    Event Loop 也叫做"事件循环",它其实与 JavaScript 的运行机制有关. JS初始设计 JavaScript 在设计之初便是单线程,程序运行时,只有一个线程存在, ...
    
			
    8. 
						
  8. python中垃圾回收机制
			
    Python垃圾回收机制详解   一.垃圾回收机制 Python中的垃圾回收是以引用计数为主,分代收集为辅.引用计数的缺陷是循环引用的问题.在Python中,如果一个对象的引用数为0,Python虚拟 ...
    
			
    9. 
						
  9. maven 远程仓库、私服及镜像配置
			
    maven仓库分类 本地仓库.远程仓库.远程仓库又有私服.中央仓库.其它公共库.中央仓库是maven自带的核心仓库. 仓库配置远程仓库可以配置多个,超级pom中定义的中央仓库 <reposito ...
    
			
    10. 
						
  10. 【个人经历】记自己的第一次GitHub开源代码共享经历
			
    题记: 自己做程序员快三年有余了,感觉自己和刚入职相比确实有了不少进步,当然三年要是不进步那不就傻了吗,有时候我也在想,我在这三年里留下了什么,当然也不是说有多么高尚的想法,就是以后对别人介绍自己的时 ...
    
			
    11.