在使用vue3的项目中,360兼容模式下可能网页不能被打开,在极速模式下可以。
因为360兼容模式使用的是IE内核,v3的项目已经不支持IE11。如果用户打开我们的网页是使用的是360兼容模式,可以加一个推荐使用其他浏览器或者切换极速模式的页面
在项目 index.html文件中做判断,判断当前浏览器是否为IE内核,如果是IE内核显示推荐页面
(判断方法是网上找到的,还有很多方法可以自行选择)
下面是index.html完整文件
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="renderer" content="webkit">
<meta charset="UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="expires" content="0" />
<link rel="icon" href="/logo.png" />
<link rel="stylesheet" href="./src/font/iconfont.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>error</title>
<style>
.back {
margin-top: 30px;
}
.broswer {
padding-top: 100px;
text-align: center;
}
.broswer ._title {
margin: 50px auto;
}
.broswer .down {
width: 650px;
margin: 0 auto;
}
.broswer .down ._img {
width: 59px;
height: 59px;
margin: 0 auto;
}
._imgMg {
margin-top: 20px;
}
a {
text-decoration: none;
color: #4688f6;
}
</style>
</head>
<body>
<div id="app">
<div id="show" style="display: none">
<div class="broswer" id="broswer">
<div class="_top">
<img src="./no_support.png" alt="">
</div>
<h2 class="_title"><span>你正在使用的浏览器版本过低,推荐切换极速模式或使用其他浏览器 </span></h2>
<div class="down">
<div class="_img">
<img src="./chrome.png" alt="">
</div>
<div class="_imgMg"><a href="https://www.google/chrome/" target="_blank">推荐使用 Google Chrome 浏览</a></div>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
<script>
function IEVersion() {
if (document.documentMode) return document.documentMode;
}
if (IEVersion()) {
var test = document.getElementById('show')
test.style.display="block"
}
</script>
</html>
Documente
error参考页面
更多推荐
360浏览器的兼容模式
发布评论