js获取屏幕分辨率和浏览器版本

应用

在用户使用网页时,限制访问网页的浏览器和版本.所以我们得获取浏览器的名字和版本号,当用户使用的浏览器不是我们限制的浏览器时我们给出提示和链接让用户去下载我们限制的浏览器.

参考https://blog.csdn.net/wangzhen_csdn/article/details/79244790这个网站使用的正则判断判断的浏览器的版本,大家可以参考参考,然后我自己参考这个网站写的代码

构思

使用 browsers 存我所限制的浏览器及浏览器的版本(当然这个是不全的),然后使用正则表达式来提取我所需要的浏览器的名字和版本号,然后使用includes函数(es6的函数,用于判断数组中是否含有某数) 返回true和false 如果返回false则到我们的提示页面,进行提示下载.

代码

 var browsers=
            {firefox:['57.0'],
            chrome:['63.0.3239.84']}
        var regulars =/(msie|firefox|chrome|opera|version).*?([\d.]+)/;
        var minResolvingsWidth = 1366;
        var minResolvingsHeight = 768;
        function getBrowserInfo(){
            var userAgent = navigator.userAgent.toLowerCase();
            var match = userAgent.match(regulars);
            match[1] = match[1].replace(/version/, "'safari");
            let versions = browsers[match[1]];
            return  res = versions.includes(match[2]);
        }
        var heigth = window.screen.height
        var width = window.screen.width;
        if(!getBrowserInfo()||width<minResolvingsWidth||heigth<minResolvingsHeight)
        {
          window.location.href='message.html';
        }

提示页面代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="/font-awesome/css/font-awesome.min.css">
  <link rel="icon" href="/favicon.png" type="image/x-icon">
  <style>
    #container {
      background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
      background-repeat: no-repeat;
      background-position: center 110px;
      background-size: 100%;
      height: 800px;
      position:relative;
      margin: 0 auto;
    }
  .top {
    width:500px;
    font-size:20px;
    color:#F51D2C;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    height: 42%;
    text-align: center;
    padding: 16px 24px;
    border-radius: 4px;
    -webkit-box-shadow: 0 4px 12px rgba(0,0,0,.15);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    background: #fff;
  }
  .message {
    font-size:18px;
    color:#a89393;
    line-height: 1.5;
    margin: 10px 20px;
    text-indent:25px;
    text-align: left;
    position: relative;
    padding: 16px 24px;
    /* -webkit-box-shadow: 0 4px 12px rgba(0,0,0,.15); */
    /* box-shadow: 0 4px 12px rgba(0,0,0,.15); */
    background: #fff;
  }
  .linkGroup
  {
    margin: 20px 0;
  }
  .anniu{
    width:120px;
    height:40px;
    background-color:#61a3da ;
    color:#FFFFFF;
    text-align:center;
    font-size:18px;
    padding: 5px;
    margin-right: 20px;
    border-radius: 10px;
    border:none;
    box-shadow:none;
    text-decoration: none;
    transition: box-shadow 0.5s;
    -webkit-transition: box-shadow 0.5s;
}
.anniu:hover{
    box-shadow:0px 0px 5px 1px #223442;
}
.anniu:active{
    box-shadow:0px 0px 5px 1px #FF0000;
}
  </style>
  <script>
    window.onload=()=>{
        document.getElementById('container').style.height=document.documentElement.clientHeight-20+'px';
    }
  </script>
</head>
<body >
    <div id='container'>
          <div class='top'>
              <span>提示</span>
              <div class="message">
                请使用Firefox或者Google,或者IEedge11访问此网页,并且分辨率不要低于1024*768,若您的电脑上没有上述提到的两个浏览器,请您点击下方链接进行下载
              </div>
              <div class='linkGroup'>
                  <a class="anniu" target="_blank" href="http://www.firefox.com.cn/">
                    Firefox下载
                   </a>
                   <a class="anniu" target="_blank" href="http://www.google.com.hk/webhp?hl=zh-CN&sourceid=cnhp">
                    Google下载
                   </a>
              </div>
          </div>
    </div>
  <script>    

    </script>
</body>

</html>

js获取屏幕分辨率和浏览器版本

应用

构思

代码

提示页面 代码

猜你喜欢

提示页面代码