1.判断访问的设备是否是移动端，可以用来引用不同设备所需的代码
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 6 <meta name="apple-mobile-web-app-capable" content="yes" /> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 8 <meta name="format-detection" content="telephone=no" /> 9 <meta name="robots" content="all" /> 10 <title>判断是否为移动端运行环境</title> 11 <meta name="keywords" content=""> 12 <meta name="description" content=""> 13 <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 14 <style> 15 .con{ 16 text-align: center; 17 font-size: 30px; 18 color: #f00; 19 } 20 </style> 21 </head> 22 <body> 23 <script> 24 $(function(){ 25 // 判断是否为移动端运行环境 26 function browserRedirect() { 27 var sUserAgent = navigator.userAgent.toLowerCase(); 28 var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; 29 var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; 30 var bIsMidp = sUserAgent.match(/midp/i) == "midp"; 31 var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; 32 var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; 33 var bIsAndroid = sUserAgent.match(/android/i) == "android"; 34 var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; 35 var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; 36 if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { 37 $(".con").html("你好，这是移动端的环境"); 38 } else { 39 $(".con").html("你好，这不是移动端的环境"); 40 } 41 } 42 browserRedirect(); 43 }) 44 </script> 45 <div class="con"></div> 46 </body> 47 </html>
2.传递参数，获取链接的参数，尤其是有tab选项卡的时候，在返回的时候回到当前的选项卡
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 6 <meta name="apple-mobile-web-app-capable" content="yes" /> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 8 <meta name="format-detection" content="telephone=no" /> 9 <meta name="robots" content="all" /> 10 <title>参数传递与返回</title> 11 <meta name="keywords" content=""> 12 <meta name="description" content=""> 13 <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 14 <style> 15 .con{ 16 text-align: center; 17 font-size: 30px; 18 color: #f00; 19 } 20 li{ 21 list-style: none; 22 float: left; 23 width: 50%; 24 text-align: center; 25 } 26 .aa{ 27 width: 100%; 28 height: 200px; 29 line-height: 200px; 30 text-align: center; 31 display: none; 32 } 33 .block{ 34 display: block; 35 } 36 </style> 37 </head> 38 <body> 39 <script> 40 //获取链接参数 41 function getQueryString(name) { 42 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 43 var r = window.location.search.substr(1).match(reg); 44 if (r != null) return unescape(r[2]); 45 return null; 46 }; 47 $(function(){ 48 var canshu = getQueryString("url"); 49 if(canshu){ 50 $(".aa").eq(1).addClass("block").siblings().removeClass("block"); 51 } 52 $("li").on("click",function(){ 53 var i=$(this).index(); 54 $(".aa").eq(i).addClass("block").siblings().removeClass("block"); 55 }); 56 }); 57 </script> 58 <div class="con">这是第一个页面</div> 59 <ul> 60 <li>1111111111111111111</li> 61 <li>2222222222222222222</li> 62 </ul> 63 <div class="main"> 64 <div class="aa block"><a href="2.html">111111111111111111</a></div> 65 <div class="aa"><a href="2.html?url='www'">222222222222222222</a></div> 66 </div> 67 </body> 68 </html>
第二个页面如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 6 <meta name="apple-mobile-web-app-capable" content="yes" /> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 8 <meta name="format-detection" content="telephone=no" /> 9 <meta name="robots" content="all" /> 10 <title>判断是否为移动端运行环境</title> 11 <meta name="keywords" content=""> 12 <meta name="description" content=""> 13 <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 14 <style> 15 .con{ 16 text-align: center; 17 font-size: 30px; 18 color: #f00; 19 } 20 li{ 21 list-style: none; 22 float: left; 23 width: 50%; 24 text-align: center; 25 } 26 .aa{ 27 width: 100%; 28 height: 200px; 29 line-height: 200px; 30 text-align: center; 31 display: none; 32 } 33 .block{ 34 display: block; 35 } 36 </style> 37 </head> 38 <body> 39 <script> 40 //获取链接参数 41 function getQueryString(name) { 42 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 43 var r = window.location.search.substr(1).match(reg); 44 if (r != null) return unescape(r[2]); 45 return null; 46 }; 47 $(function(){ 48 var canshu = getQueryString("url"); 49 $("p.con").on("click",function(){ 50 if(canshu){ 51 window.location.href = '参数传递与返回.html?url="www"'; 52 }else{ 53 window.location.href = '参数传递与返回.html'; 54 } 55 }); 56 }); 57 </script> 58 <p class="con">跳转到第1个页面</p> 59 </body> 60 </html>
3.判断横竖屏显示，一般用于当是横屏显示的时候可以执行另一套代码
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 6 <meta name="apple-mobile-web-app-capable" content="yes" /> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 8 <meta name="format-detection" content="telephone=no" /> 9 <meta name="robots" content="all" /> 10 <title>判断横竖屏</title> 11 <meta name="keywords" content=""> 12 <meta name="description" content=""> 13 <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 14 <style> 15 .con{ 16 text-align: center; 17 font-size: 30px; 18 color: #f00; 19 } 20 </style> 21 </head> 22 <body> 23 <script> 24 //获取页面视口宽高 25 function getViewRect() { 26 var pageWidth = window.innerWidth 27 ,pageHeight = window.innerHeight; 28 29 if ( typeof pageWidth != 'number' ) { 30 if ( document.compatMode == 'CSS1Compat') { 31 pageWidth = document.documentElement.clientWidth; 32 pageHeight = document.documentElement.clientHeight; 33 } else { 34 pageWidth = document.body.clientWidth; 35 pageHeight = document.body.clientHeight; 36 } 37 } 38 return { 39 pageWidth, 40 height: pageHeight 41 }; 42 }; 43 /*判断横竖屏*/ 44 function hengshuping(){ 45 if(window.orientation==180||window.orientation==0){ 46 var h = getViewRect().height; 47 $('.con').css('minHeight',h + 'px').html("这是竖屏"); 48 } 49 if(window.orientation==90||window.orientation==-90){ 50 var h = getViewRect().height; 51 $('.con').css('minHeight',h + 'px').html("这是横屏"); 52 } 53 }; 54 $(function(){ 55 hengshuping(); 56 $(window).on('orientationchange',function() { 57 setTimeout(function() { 58 hengshuping(); 59 },600); 60 }); 61 }) 62 </script> 63 <div class="con"></div> 64 </body> 65 </html>
4.判断浏览器信息
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 6 <meta name="apple-mobile-web-app-capable" content="yes" /> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 8 <meta name="format-detection" content="telephone=no" /> 9 <meta name="robots" content="all" /> 10 <title>判断浏览器版本信息</title> 11 <meta name="keywords" content=""> 12 <meta name="description" content=""> 13 <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 14 <style> 15 .con{ 16 text-align: center; 17 font-size: 30px; 18 color: #f00; 19 } 20 </style> 21 </head> 22 <body> 23 <script> 24 $(function(){ 25 var browser = { 26 versions: function() { 27 var u = navigator.userAgent, app = navigator.appVersion; 28 return {//移动终端浏览器版本信息 29 trident: u.indexOf('Trident') > -1, //IE内核 30 presto: u.indexOf('Presto') > -1, //opera内核 31 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 32 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 33 mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端 34 ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 35 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器 36 iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器 37 iPad: u.indexOf('iPad') > -1, //是否iPad 38 webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部 39 }; 40 }(), 41 language: (navigator.browserLanguage || navigator.language).toLowerCase() 42 } 43 44 var ua = window.navigator.userAgent.toLowerCase(); 45 46 if(ua.match(/MicroMessenger/i) == 'micromessenger'){ 47 //$('.wholePage').show(); 48 $(".con").html("111"); 49 }else if(browser.versions.ios || browser.versions.iPhone || browser.versions.iPad){ 50 //$('#downMsg').show(); 51 $(".con").html("222"); 52 // location.href = 'https://itunes.apple.com/cn/app/id1149168395'; 53 }else{ 54 //$('#downMsg').show(); 55 $(".con").html("333"); 56 // location.href = "http://www1.zhiya100.com:8000/subject/app/zhiya100.apk"; 57 } 58 }) 59 </script> 60 <div class="con"></div> 61 </body> 62 </html>