手机端的浏览器适配问题的心得

[javascript] view plain copy

1. <script>  
2.         var browser = {  
3.             versions: function () {  
4.                 var u = navigator.userAgent, app = navigator.appVersion;  
5.                 return {//移动终端浏览器版本信息  
6.                     trident: u.indexOf('Trident') > -1, //IE内核  
7.                     presto: u.indexOf('Presto') > -1, //opera内核  
8.                     webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核  
9.                     gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核  
10.                     mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端  
11.                     ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端  
12.                     android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器  
13.                     iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器  
14.                     iPad: u.indexOf('iPad') > -1, //是否iPad  
15.                     webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部  
16.                 };  
17.             } (),  
18.             language: (navigator.browserLanguage || navigator.language).toLowerCase()  
19.         }  
20.         function isIOS9() {  
21.             //获取固件版本  
22.             var getOsv = function () {  
23.                 var reg = /OS ((\d+_?){2,3})\s/;  
24.                 if (navigator.userAgent.match(/iPad/i) || navigator.platform.match(/iPad/i) || navigator.userAgent.match(/iP(hone|od)/i) || navigator.platform.match(/iP(hone|od)/i)) {  
25.                     var osv = reg.exec(navigator.userAgent);  
26.                     if (osv.length > 0) {  
27.                         return osv[0].replace('OS', '').replace('os', '').replace(/\s+/g, '').replace(/_/g, '.');  
28.                     }  
29.                 }  
30.                 return '';  
31.             };  
32.             var osv = getOsv();  
33.             var osvArr = osv.split('.');  
34.             //初始化显示ios9引导  
35.             if (osvArr && osvArr.length > 0) {  
36.                 if (parseInt(osvArr[0]) >= 9) {  
37.                     return true  
38.                 }  
39.             }  
40.             return false  
41.         }  
42.         function Return_url(app_url) {  
43.             if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {  
44.                 if (isIOS9()) {  
45.                     window.location = "";  
46.                 }  
47.                 else {  
48.                     window.location = "";  
49.                 }  
50.             }  
51.             else if (browser.versions.android) {  
52.                 window.location = app_url;  
53.             }  
54.             else {  
55.                 window.location = app_url;  
56.             }  
57.         }  
58.   </script>  

1. 新增的内容

2. 开发的时候看到了这两行代码，查了一下作用然后记录下来。

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   如果支持Google Chrome Frame：GCF，则使用GCF渲染；如果系统安装ie8或以上版本，则使用最高版本ie渲染；否则，这个设定可以忽略。

   
   

   <meta name="viewport" content="width=device-width">

   width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maximum-scale - 允许用户缩放到的最大比例user-scalable - 用户是否可以手动缩放

   在做手机适配的时候忘记加上了，结果效果怎么都实现不了。。