build/upgrade-browser.html

219 lines
6.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<script>
// IE >= 10 不支持 IE 浏览器判断标签了,要支持这个标签,必须配置这个:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1" />
// 官方说明https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)?redirectedfrom=MSDN
window.isIEBrowser = true;
</script>
<![endif]-->
<script>
// if (!window.isIEBrowser) {
// window.location.replace(window.location.origin);
// }
</script>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<title>头歌实践教学平台</title>
<style>
body {
font-size: 14px;
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.tc {
text-align: center;
}
.red {
color: #d60012;
}
.layout__desc {
font-size: 16px;
font-weight: bold;
padding: 40px 0;
text-align: center;
}
.btn {
text-align: center;
}
.btn a {
color: #333;
text-align: center;
display: inline-block;
width: 110px;
text-decoration: none;
margin: 0 20px;
}
.card__info {
max-width: 580px;
text-align: left;
margin: 0 auto;
}
.recommend {
position: relative;
height: 1px;
max-width: 580px;
margin: 40px auto;
background-color: #ccc;
}
.recommend span {
position: relative;
background-color: #FFF;
top: -8px;
padding: 0 10px;
}
.layout__logo {
width: 140px;
margin: 20px 0 20px 40px;
}
@media screen and (max-width: 800px) {
.layout__logo {
margin-left: -10px;
}
body {
padding: 0 20px;
}
}
</style>
<body>
<div class="layout">
<img class="layout__logo" src="images/logo.jpg" alt="logo">
<div class="layout__desc">浏览器版本过低,请立即升级</div>
<div class="layout__body card">
<div class="card__info">
<div class="card__title">您当前使用的浏览器类型:<span class="red" id="version"></span>,该浏览器的<span
class="red">部分组件版本过低,</span></div>
<div class="card__tip">将影响正常使用,请立即升级为推荐浏览器,获得完美体验。</div>
<ul>
<!-- <li>
若当前为QQ/360/搜狗/遨游浏览器,
<br>
请切换为“极速模式”
<br>
<a href="https://jingyan.baidu.com/article/17bd8e527a425085ab2bb8cb.html"
target="_blank">如何切换</a>
</li> -->
<li>
<br>
<br>
如果您的问题得不到解决,欢迎扫码联系头歌助教
<br>
<br>
<br>
</li>
<li class="tc"><img src="images/qrcode.png" width="180" /></li>
</ul>
<div class="recommend tc">
<span>推荐使用一下浏览器</span>
</div>
<div class="btn">
<a href="https://www.google.cn/intl/zh-cn/chrome/" target="_blank">
<img width="70" src="images/chrome.jpg" /><br />
谷歌浏览器
</a>
<a href="http://www.firefox.com.cn/" target="_blank">
<img width="80" src="images/firefox.jpg" /><br />
火狐浏览器
</a>
</div>
</div>
</div>
</div>
<script>
function IEVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7) {
return 7;
} else if (fIEVersion == 8) {
return 8;
} else if (fIEVersion == 9) {
return 9;
} else if (fIEVersion == 10) {
return 10;
} else {
return 6;//IE版本<=7
}
} else if (isEdge) {
return 'edge';//edge
} else if (isIE11) {
return 11; //IE11
} else {
return -1;//不是ie浏览器
}
}
function getBrowserInfo() {
var agent = navigator.userAgent.toLowerCase();
var regStr_ie = /msie [\d.]+;/gi;
var regStr_ff = /firefox\/[\d.]+/gi
var regStr_chrome = /chrome\/[\d.]+/gi;
var regStr_saf = /safari\/[\d.]+/gi;
if(IEVersion() != '-1'){
return "IE " + IEVersion()
}
//IE
if (agent.indexOf("msie") > 0) {
return agent.match(regStr_ie);
}
//firefox
if (agent.indexOf("firefox") > 0) {
return agent.match(regStr_ff);
}
//Safari
if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
return agent.match(regStr_saf);
}
//Chrome
if (agent.indexOf("chrome") > 0) {
return agent.match(regStr_chrome);
}
}
var browser = getBrowserInfo();
document.getElementById("version").innerHTML = browser
</script>
</body>
</html>