2018.6.16 端午节开始笔记

说道前端页面兼容问题，首先应该了解，通过同一网站怎么判断打开用户是手机端还是pc端，这是前端页面兼容问题前提。
写到这里我想有人这样说，根据屏幕大小判断是否是手机还是电脑，这个我不否认可以，但是现在我说的是另一种方法。

Navigator对象

首先来了解一下Navigator 对象，Navigator 对象包含有关浏览器的信息，下面的userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。所以我们可以通过判断navigator.useragent里面是否有某些值来判断，比如我的电脑是mac，所以打印出来的值为

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

具体含义不解释，有兴趣同学自行百度，可以看到里面含有 Mac 字样，其他的也是类似的。

　那如何判断页面是在移动端还是PC端打开的呢？
　网上有很多方法，写的或难或简单，实际上一行代码就够了
　

<script type="text/javascript">function is_mobile() {var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;var u = navigator.userAgent;if (null == u) {return true;}var result = regex_match.exec(u);if (null == result) {return false} else {return true}}
if (is_mobile()) {
document.location.href = 'http://m.ftcycc.com/';
}</script>

window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" :  "http://news.baidu.com/";

以上代码利用了正则表达式和三目运算符，含义就是如果是移动端打开的话那就跳转到 “https:www.baidu.com/” ，如果不是就跳转到”http://new.baidu.com/“，这个看不懂的话，那我下面这样写就很容易理解了吧

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {window.location.href = "https://www.baidu.com/";
} else {window.location.href = "http://news.baidu.com/";
}

　什么？if里面的判断还是看不懂？实际上就是利用正则去判断 navigator.useragent 是否含有 Android/webOs/iphone 等字符串，并且利用修饰符 “i” 做了不区分大小写，然后用正则的方法 test 去判断是否满足，如果这种方式不理解的话完全可以利用字符串的 indexOf 方法去判断。
　OK，就说这么多咯！祝工作顺利！

BrowserDetect.js

浏览器检测是在工作中经常用到的，如果只是简单判断当前是什么浏览器的话可以通过window.navigator.useragent这样的js来直接判断就可以了！
但是针对浏览器版本要求比较高的时候，如果只是单纯的判断浏览器的名字的话还不能解决问题，这时候就要通过其他方式来实现！现有的jquery已经废弃了$.browser的使用，所以在这里我介绍一个叫做”浏览器嗅探器”的程序来实现！
代码如下：（BrowserDetect.js）

var BrowserDetect = {init: function () {this.browser = this.searchString(this.dataBrowser) || "An unknown browser";this.version = this.searchVersion(navigator.userAgent)|| this.searchVersion(navigator.appVersion)|| "an unknown version";this.OS = this.searchString(this.dataOS) || "an unknown OS";},searchString: function (data) {for (var i=0;i<data.length;i++)    {var dataString = data[i].string;var dataProp = data[i].prop;this.versionSearchString = data[i].versionSearch || data[i].identity;if (dataString) {if (dataString.indexOf(data[i].subString) != -1)return data[i].identity;}else if (dataProp)return data[i].identity;}},searchVersion: function (dataString) {var index = dataString.indexOf(this.versionSearchString);if (index == -1) return;return parseFloat(dataString.substring(index+this.versionSearchString.length+1));},dataBrowser: [{string: navigator.userAgent,subString: "Chrome",identity: "Chrome"},{     string: navigator.userAgent,subString: "OmniWeb",versionSearch: "OmniWeb/",identity: "OmniWeb"},{string: navigator.vendor,subString: "Apple",identity: "Safari",versionSearch: "Version"},{prop: window.opera,identity: "Opera"},{string: navigator.vendor,subString: "iCab",identity: "iCab"},{string: navigator.vendor,subString: "KDE",identity: "Konqueror"},{string: navigator.userAgent,subString: "Firefox",identity: "Firefox"},{string: navigator.vendor,subString: "Camino",identity: "Camino"},{        // for newer Netscapes (6+)string: navigator.userAgent,subString: "Netscape",identity: "Netscape"},{string: navigator.userAgent,subString: "MSIE",identity: "Internet Explorer",versionSearch: "MSIE"},{string: navigator.userAgent,subString: "Gecko",identity: "Mozilla",versionSearch: "rv"},{         // for older Netscapes (4-)string: navigator.userAgent,subString: "Mozilla",identity: "Netscape",versionSearch: "Mozilla"}],dataOS : [{string: navigator.platform,subString: "Win",identity: "Windows"},{string: navigator.platform,subString: "Mac",identity: "Mac"},{string: navigator.userAgent,subString: "iPhone",identity: "iPhone/iPod"},{string: navigator.platform,subString: "Linux",identity: "Linux"}]};
BrowserDetect.init();

使用方式如下：

BrowserDetect.browser;// 浏览器的名称，例如Firefox，IE
BrowserDetect.version;//浏览器的版本，比如，7、11
BrowserDetect.OS;//浏览器所宿主的操作系统，比如Windows、Linux

这个js兼容非常不错！使用起来比较简单，而且功能强大！

browserSniffer

现在的浏览器可真是越来越多，但兼容性可真是不敢恭维，这个脚本可根据浏览器来自动进行导航，在特定场合是非常有用的，你好好看看吧！！！

<SCRIPT language="JavaScript">  function browserSniffer(netscape4URL,explorer4URL,webtvURL,aolURL,operaURL,version3URL,w3cURL) {
var agt=navigator.userAgent.toLowerCase();
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
&& (agt.indexOf('webtv')==-1));
var is_nav2 = (is_nav && (is_major == 2));
var is_nav3 = (is_nav && (is_major == 3));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav4up = (is_nav && (is_major >= 4));
var is_navonly = (is_nav && ((agt.indexOf(";nav") != -1) || (agt.indexOf("; nav") != -1)) );
var is_nav5 = (is_nav && (is_major == 5));
var is_nav5up = (is_nav && (is_major >= 5));
var is_ie = (agt.indexOf("msie") != -1);
var is_ie3 = (is_ie && (is_major < 4));
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")==-1) );
var is_ie4up = (is_ie && (is_major >= 4));
var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
var is_aol = (agt.indexOf("aol") != -1);
var is_aol3 = (is_aol && is_ie3);
var is_aol4 = (is_aol && is_ie4);
var is_opera = (agt.indexOf("opera") != -1);
var is_webtv = (agt.indexOf("webtv") != -1);  if (is_nav4up) {  location.href = netscape4URL; // netscape 4+ but not NS5
}else if (is_ie4up) { //IE4 & IE5 but returns IE4  location.href = explorer4URL;
}else if (is_webtv) { // Web TV  location.href = webtvURL;
}else if (is_aol || is_aol3 || is_aol4) { //AOL  location.href = aolURL;
}else if (is_opera) { // Opera  location.href = operaURL;
}else if (is_ie3||is_nav3) { // 3.0 version browsers  location.href = version3URL;
}else if (is_nav5up) { // Netscape 5  location.href = w3cURL;
}
}  </SCRIPT>
<BODY onLoad="browserSniffer('nn4.html','IE4.html','webtv.html', 'aol.html','opera.html','NNandIE3.html','nn6.html')">

前端页面兼容性问题学习相关推荐

Web前端页面的浏览器兼容性测试心得（三）总结一些IE8兼容问题的解决方案
Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案参考文章: (1)Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案 (2)https://www. ...
前端页面有哪三层构成兼容性
[HTML && CSS] 1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 首先我讲讲如何触发两种模式: 加入xml头部声明可以触发IE ...
vue在微信里面的兼容问题_微信H5页面兼容性问题分析及解决方法
随着H5页面越来越流行,越来越多的开发者都开始用最近H5做微信公众号,在这个过程中自然也会遇到不少的问题.小编在这里整理了五种常见的微信H5页面兼容性问题,来和大家分析一下问题的详情.出现原因以及相对 ...
前端页面与form表单提交：代码分享
今天分享下"前端页面与form表单提交:代码分享"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习 ...
Asp.net前端页面开发总结
经过半个月的奋斗,善良公社项目书画院前台的web界面竣工了.虽然界面并不是很完美,说明学习的地方还有很多.在界面部分需要的技术:div+css.JavaScript.Ajax.HTML和一般处理程序等 ...
不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案
CORS也已经成为主流的跨域解决方案,不过CORF也会引发CSRF,本文先分享第三方的一个前端工具箱全面展示那些浏览器版本支持CORS,由于各家浏览器厂商因为各自原因在不同的版本里支持的标准不同,这个 ...
前端页面紫红色_谷歌正在开发一种神秘的新型移动操作系统，称为紫红色
前端页面紫红色 Google seems to be building a replacement for Android called Fuchsia. Yesterday, they reveal ...
好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
后端工程师入门前端页面重构（二）：心法 I
本文由 KnewHow 发表在 ScalaCool 团队博客. 上一篇博客是我们<后端工程师入门前端页面重构>系列的第一篇,我们介绍了页面布局的口诀: 从左到右,从上到下,化整为零. 那么 ...
前端处理带t的时间_大厂实践：如何优雅的监控前端页面性能
前言前端页面性能是一个非常核心的用户体验指标.本文介绍岳鹰全景监控平台如何设计一个通用.低侵入性.自动上报的页面性能监控方案.主要采用的是Navigation Timing API以及sendB ...

前端页面兼容性问题学习

2018.6.16 端午节开始笔记

Navigator对象

BrowserDetect.js

browserSniffer

前端页面兼容性问题学习相关推荐

最新文章

热门文章