移動端經常使用代碼

時間 2019-11-11

標籤移動經常使用代碼欄目無線简体版

原文原文鏈接

1.判斷訪問的設備是不是移動端，能夠用來引用不一樣設備所需的代碼css

 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選項卡的時候，在返回的時候回到當前的選項卡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         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>

第二個頁面以下：jquery

 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.判斷橫豎屏顯示，通常用於當是橫屏顯示的時候能夠執行另外一套代碼android

 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                 width: 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.判斷瀏覽器信息ios

 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>