360浏览器的兼容模式

zxinnnny

已于 2023-02-03 14:41:49 修改

阅读量802

点赞数

文章标签：前端 javascript html

于 2023-02-01 09:12:11 首次发布

本文链接：https://blog.csdn.net/qq_52563030/article/details/128826460

版权

在使用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.cn/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参考页面