PREMISE

Question

我正在使用CSS flexbox重新构建网站。

在检查browser compatibility时，我发现所有现代浏览器都支持flexbox，但Safari 8和IE 10需要供应商前缀。

在查看Google Analytics时，我发现过去6个月内96％的网站访问者使用完全支持flexbox的浏览器。其余4％使用需要前缀或不提供支持的浏览器。

由于我们讨论的是4％的用户，并且数量会越来越小，（我希望尽可能保持我的代码干净简单），我考虑不使用前缀，而是要求用户升级他们的浏览器。

如何定位旧浏览器以向用户显示要求他们更新浏览器的消息？

这是我到目前为止所拥有的：

<!--[if IE]>
    <div class="browserupgrade">
        <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">
           upgrade your browser</a> to improve your experience.</p>
    </div>
<![endif]-->

此IE条件评论涵盖了IE版本6,7,8和9。

这些访问者将收到一条警报，其中包含下载当前浏览器的链接。但是，Microsoft discontinued support for conditional comments starting with IE10。

现在我需要类似的东西：

IE 10
Safari 7-8
Opera Mini＆lt; 8
适用于Android的UC浏览器
Android浏览器＆lt; 4.4

是否有一个简单的JS / jQuery脚本来处理这项工作？还是另一种轻量级方法？

解决方案

感谢所有答案。很明显，有很多方法可以解决这个问题（Modernizr，PHP，jQuery函数，普通的Javascript，CSS，browser-update.org等）。这些方法中的许多方法都能完全有效地完成这项工作。

我选择了最简单的一个：CSS（信用@LGSon）。

除了IE＆lt; = 7。

之外，这个CSS基本上涵盖了所有目标浏览器

.browserupgrade { display: block; }
_:-ms-fullscreen, :root .browserupgrade { display: none; }
:-o-prefocus, .browserupgrade { display: none; }
@supports (display: flex) { .browserupgrade { display: none; }}

详见答案。

对于使用IE＆lt; = 7的相对较少的访问者，HTML中的条件注释：

<!--[if lte IE 7]>
    <div style=" ... inline styles here ...">
        browser upgrade message here
    </div>
<![endif]-->

Answer 1

问题编辑后的修改后的答案

这是实现这一目标的唯一方法。

由于CSS @supports无法在您的目标（不需要的）浏览器上运行：Safari 7-8，IE＆lt; = 10，Android Browser＆lt; 4.4，适用于Android和Opera Mini的UC浏览器＆lt; 8，你的＆＃34; browserupgrade＆＃34;消息将在使用此规则的人身上显示。

@supports (display: flex) { .browserupgrade { display: none; }}

有一些浏览器仍然支持非前缀flex但不支持@supports，IE 11 ^（1）和Opera Mini 8但幸运的是，我们可以通过一些CSS特定规则解决这些问题。

/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade { display: none; }

/* Opera Mini 8 */
:-o-prefocus, .browserupgrade { display: none; }

以下是显示目标浏览器升级消息的完整代码。

CSS

.browserupgrade { display: block; }

/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade { display: none; }

/* Opera Mini 8 */
:-o-prefocus, .browserupgrade { display: none; }

/* all modern browsers */
@supports (display: flex) { .browserupgrade { display: none; }}

HTML

<div class="browserupgrade">
    <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">
       upgrade your browser</a> to improve your experience.</p>
</div>

（1）：IE 11 CSS规则也适用于IE Mobile 11，但没有人可以对其进行测试。

CSS @supports也可用作API CSS.supports()。这是一篇写得很好的article by David Walsh。

此外，如果想要自动重定向这些浏览器，这是一个小脚本，在延迟10秒后执行此操作。

var el = document.querySelector('.browserupgrade');
if (window.getComputedStyle(el,null).getPropertyValue("display") != 'none') {
  setTimeout(function(){
    window.location = 'http://browsehappy.com/';        
  }, 10000);
}

Answer 2

PREMISE

JavaScript style属性返回浏览器支持的指定元素的完整CSS属性集合，可以使用以下代码段进行测试：

＆＃13;

for(var x in document.body.style)
    console.log(x);

＆＃13;

无论是否为指定元素显式设置特定属性，都是如此。例如，可以通过在Chrome中运行以下代码段来测试此问题;第一行将返回false，因为Chrome尚未支持未加前缀的appearance属性，而第二行将返回true。

＆＃13;

console.log("appearance" in document.body.style);
console.log("-webkit-appearance" in document.body.style);

＆＃13;

body{
    appearance:none;
}

＆＃13;

但是，应该注意的是，如果使用JavaScript在元素上设置了不受支持的属性，则通过style属性检查是否存在该属性将返回true：

＆＃13;

document.body.style.appearance="none";
console.log("appearance" in document.body.style);

＆＃13;

因此，我们将使用document.createElement()创建一个临时元素，以便我们可以确定我们正在检查的属性都没有以这种方式设置。（感谢Gothdo提出这一建议，因此无需做出任何假设。）

要求

查看要定位的浏览器列表：

Internet Explorer 10支持带有-ms-前缀的Flexbox。
Safari 7＆amp; 8支持带有-webkit-前缀的flexbox。
根据caniuse.com，Opera Mini自第5版以来一直支持flexbox而没有前缀，但是我无法证明其准确性，并且正在寻找有人来确认它。
UC浏览器当前（v9.9）支持带有-webkit-前缀的flexbox。
在v4.4之前，Android浏览器支持带有-webkit-前缀的Flexbox。

解

我们可以从该列表中看到，所有要定位的浏览器都需要Flexbox属性的前缀，因此我们可以通过检查临时元素中是否存在任何未加前缀的属性来定位它们{{1收集。在以上任何浏览器中运行时，以下代码段将返回style：

＆＃13;

true

＆＃13;

有了这些知识，我们现在可以创建一个工作解决方案，将浏览器升级消息显示给必要的浏览器。

＆＃13;

console.log(!("flex" in document.createElement("p").style));

＆＃13;

if(!("flex" in document.createElement("p").style))
    document.getElementById("browserupgrade").style.display="block";

＆＃13;

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

＆＃13;

注意

旧语法

有一个version of the current flexbox spec that used a slightly different syntax，其中一个差异是<div id="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div>属性被命名为order。据我所知，唯一支持该语法的浏览器是IE10，它需要前缀，因此应该是上述解决方案的目标。但是，为了完整起见，如果有任何浏览器支持没有前缀的语法，您可以包括对flex-order属性的存在的附加检查，同时还检查flex-order属性如果有任何浏览器支持这两种语法版本，则不会出现。

＆＃13;

order

＆＃13;

var checkstyle=document.createElement("p").style;
if(!("flex" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle)))
    document.getElementById("browserupgrade").style.display="block";

＆＃13;

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

＆＃13;

火狐

Firefox在版本22中添加了对未加前缀的flexbox属性的支持，但在版本28之前不支持<div id="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div>或flex-flow属性，因此要将v22-27添加到我们的定位，我们应该检查存在其中一个属性。

＆＃13;

flex-wrap

＆＃13;

var checkstyle=document.createElement("p").style;
if(!("flex-flow" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle)))
    document.getElementById("browserupgrade").style.display="block";

＆＃13;

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

＆＃13;

Internet Explorer 11

尽管不需要加前缀，但IE11对flexbox的支持仍为extremely buggy，因此您可能还需要考虑定位它。没有办法使用任何flexbox属性，但IE 7-11（有点）通过非标准<div id="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div>属性支持image-rendering property，稍后在Edge / v12 +中删除支持所以我们可以检查一下。但是，无法保证此属性不会被重新添加到Edge的未来版本中，以便进行监控。

＆＃13;

-ms-interpolation-mode

＆＃13;

var checkstyle=document.createElement("p").style;
if(!("flex-flow" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle))||"-ms-interpolation-mode" in checkstyle)
    document.getElementById("browserupgrade").style.display="block";

＆＃13;

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

＆＃13;

Opera Mini

虽然caniuse.com声称自从第5版以来Opera Mini中已经存在对flexbox的全面支持，并且被广泛认为是此类信息的权威来源，但如果您仍希望定位它，则可以通过检查它无法支持的众多属性之一的存在。不过，为了简洁起见，我建议您使用Opera Mini检查transform-style not supported或使用IE的前端版本替换<div id="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div>支票。与之前的检查一样，应该监视这个版本，因为您可能不希望定位的Opera Mini的未来版本可能继续不支持-ms-interpolation-mode属性。

＆＃13;

transform-style

＆＃13;

var checkstyle=document.createElement("p").style;
if(!("flex-flow" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle))||!("transform-style" in checkstyle))
    document.getElementById("browserupgrade").style.display="block";

＆＃13;

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

＆＃13;

更新

13/05/16：在问题更新后，添加了额外的检查以定位更多浏览器 16/05/16 ：根据评论中提供的反馈添加了对提议解决方案的更详细说明，并使其值得提供。删除了old flexbox spec的支票，因为它们是多余的 17/05/16：添加了一个临时元素来运行检查，而不是使用<div id="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div>，遵循Gothdo的建议，这导致删除建议使用document.body以获得更广泛的浏览器支持 23/05/16：为Internet Explorer 11＆amp;添加了建议检查的注释。 Opera Mini。

Answer 3

您可以modernizr.js使用feature detection。

如果找不到该功能，请编写一些JavaScript以将用户重定向到上面的网址。

Answer 4

是的，我们有一个解决方案......

首先从（点击此处 - ）https://modernizr.com/下载自定义构建Modernizr （对于 flexbox属性），然后在页面中包含最新的 Jquery ，添加一些样式表，就完成了！

（注意：没有必要下载自定义构建Modernizr，您可以直接从Modernizr CDN使用整个完整版本，但因为您只需要检查Flexbox属性;这就是我告诉您下载自定义构建的原因）

检查此小提琴flexbox support fiddle

您的整个html页面（使用css，jquery）将是这样的......

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title>BroswerCheck</title>
    <style type="text/css">
        #browserupgrade{
            display:none;
            text-align:center;
            background:#F1070B;
            color:#FFFFFF;
            font-family:Segoe, "Segoe UI", Verdana, sans-serif;
            font-size:15px;
            padding:10px;}

        #browserupgrade a{
            color:#FFFFFF;
            background:#000000;
            text-decoration:none;
            padding:5px 15px;
            border-radius:25px;}
    </style>
    <script src="modernizr.js"></script>
</head>

<body>
    <div id="browserupgrade">
        <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    </div>

    <script src="jquery-2.1.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            if (!Modernizr.flexbox) { $("#browserupgrade").show(); }
        });
    </script>
</body>
</html>

您的步骤将是，

<强> 1。下载自定义Modernizr以检测flexbox属性

<强> 2。创建一个html标签

中添加了class =“no-js”的html页面

第3。创建一个用于显示消息的div并将其隐藏

<强> 4。将jquery和Modernizr添加到您的页面

<强> 5。当浏览器不支持flexbox-property

时显示div

（为此目的使用'Modernizr.flexbox'属性，如上面的脚本所示）

或者如果您不想使用Jquery，请使用以下脚本（感谢@Shaggy），

$(document).ready(function () { 
    if(!Modernizr.flexbox)document.getElementByID("browserupgrade").style.display="‌block";
});

Answer 5

编辑：

有两种可行的方法：Modernizr或Feature Queries。 Modernizr是目前稳定的解决方案，但是当所有浏览器完全支持时，功能查询@support将是用于css特征检测的最佳纯CSS解决方案。

目前，您需要添加一些前缀来定位那些不支持功能查询的浏览器，即。看LGSon的答案。

Modernizr方法：

您可以像以前建议的那样创建一个flexbox自定义Modernizr构建：Modernizr Custom Flexbox Build。在您的网站中引用您的自定义modernizr javascript文件，然后添加一些Html标记和Css类，如下所示：

注意：在不同的浏览器中打开代码段以检查支持。

TESTS：

没有Flexbox支持：Internet Explorer 10

Flexbox支持：Chrome 50

＆＃13;

/*! modernizr 3.3.1 (Custom Build) | MIT *
 * https://modernizr.com/download/?-flexbox-setclasses !*/
! function(e, n, t) {
  function r(e, n) {
    return typeof e === n
  }

  function o() {
    var e, n, t, o, s, i, a;
    for (var l in C)
      if (C.hasOwnProperty(l)) {
        if (e = [], n = C[l], n.name && (e.push(n.name.toLowerCase()), n.options && n.options.aliases && n.options.aliases.length))
          for (t = 0; t < n.options.aliases.length; t++) e.push(n.options.aliases[t].toLowerCase());
        for (o = r(n.fn, "function") ? n.fn() : n.fn, s = 0; s < e.length; s++) i = e[s], a = i.split("."), 1 === a.length ? Modernizr[a[0]] = o : (!Modernizr[a[0]] || Modernizr[a[0]] instanceof Boolean || (Modernizr[a[0]] = new Boolean(Modernizr[a[0]])), Modernizr[a[0]][a[1]] = o), g.push((o ? "" : "no-") + a.join("-"))
      }
  }

  function s(e) {
    var n = x.className,
      t = Modernizr._config.classPrefix || "";
    if (_ && (n = n.baseVal), Modernizr._config.enableJSClass) {
      var r = new RegExp("(^|\\s)" + t + "no-js(\\s|$)");
      n = n.replace(r, "$1" + t + "js$2")
    }
    Modernizr._config.enableClasses && (n += " " + t + e.join(" " + t), _ ? x.className.baseVal = n : x.className = n)
  }

  function i(e, n) {
    return !!~("" + e).indexOf(n)
  }

  function a() {
    return "function" != typeof n.createElement ? n.createElement(arguments[0]) : _ ? n.createElementNS.call(n, "http://www.w3.org/2000/svg", arguments[0]) : n.createElement.apply(n, arguments)
  }

  function l(e) {
    return e.replace(/([a-z])-([a-z])/g, function(e, n, t) {
      return n + t.toUpperCase()
    }).replace(/^-/, "")
  }

  function f(e, n) {
    return function() {
      return e.apply(n, arguments)
    }
  }

  function u(e, n, t) {
    var o;
    for (var s in e)
      if (e[s] in n) return t === !1 ? e[s] : (o = n[e[s]], r(o, "function") ? f(o, t || n) : o);
    return !1
  }

  function d(e) {
    return e.replace(/([A-Z])/g, function(e, n) {
      return "-" + n.toLowerCase()
    }).replace(/^ms-/, "-ms-")
  }

  function p() {
    var e = n.body;
    return e || (e = a(_ ? "svg" : "body"), e.fake = !0), e
  }

  function c(e, t, r, o) {
    var s, i, l, f, u = "modernizr",
      d = a("div"),
      c = p();
    if (parseInt(r, 10))
      for (; r--;) l = a("div"), l.id = o ? o[r] : u + (r + 1), d.appendChild(l);
    return s = a("style"), s.type = "text/css", s.id = "s" + u, (c.fake ? c : d).appendChild(s), c.appendChild(d), s.styleSheet ? s.styleSheet.cssText = e : s.appendChild(n.createTextNode(e)), d.id = u, c.fake && (c.style.background = "", c.style.overflow = "hidden", f = x.style.overflow, x.style.overflow = "hidden", x.appendChild(c)), i = t(d, e), c.fake ? (c.parentNode.removeChild(c), x.style.overflow = f, x.offsetHeight) : d.parentNode.removeChild(d), !!i
  }

  function m(n, r) {
    var o = n.length;
    if ("CSS" in e && "supports" in e.CSS) {
      for (; o--;)
        if (e.CSS.supports(d(n[o]), r)) return !0;
      return !1
    }
    if ("CSSSupportsRule" in e) {
      for (var s = []; o--;) s.push("(" + d(n[o]) + ":" + r + ")");
      return s = s.join(" or "), c("@supports (" + s + ") { #modernizr { position: absolute; } }", function(e) {
        return "absolute" == getComputedStyle(e, null).position
      })
    }
    return t
  }

  function h(e, n, o, s) {
    function f() {
      d && (delete z.style, delete z.modElem)
    }
    if (s = r(s, "undefined") ? !1 : s, !r(o, "undefined")) {
      var u = m(e, o);
      if (!r(u, "undefined")) return u
    }
    for (var d, p, c, h, v, y = ["modernizr", "tspan", "samp"]; !z.style && y.length;) d = !0, z.modElem = a(y.shift()), z.style = z.modElem.style;
    for (c = e.length, p = 0; c > p; p++)
      if (h = e[p], v = z.style[h], i(h, "-") && (h = l(h)), z.style[h] !== t) {
        if (s || r(o, "undefined")) return f(), "pfx" == n ? h : !0;
        try {
          z.style[h] = o
        } catch (g) {}
        if (z.style[h] != v) return f(), "pfx" == n ? h : !0
      }
    return f(), !1
  }

  function v(e, n, t, o, s) {
    var i = e.charAt(0).toUpperCase() + e.slice(1),
      a = (e + " " + b.join(i + " ") + i).split(" ");
    return r(n, "string") || r(n, "undefined") ? h(a, n, o, s) : (a = (e + " " + E.join(i + " ") + i).split(" "), u(a, n, t))
  }

  function y(e, n, r) {
    return v(e, t, t, n, r)
  }
  var g = [],
    C = [],
    w = {
      _version: "3.3.1",
      _config: {
        classPrefix: "",
        enableClasses: !0,
        enableJSClass: !0,
        usePrefixes: !0
      },
      _q: [],
      on: function(e, n) {
        var t = this;
        setTimeout(function() {
          n(t[e])
        }, 0)
      },
      addTest: function(e, n, t) {
        C.push({
          name: e,
          fn: n,
          options: t
        })
      },
      addAsyncTest: function(e) {
        C.push({
          name: null,
          fn: e
        })
      }
    },
    Modernizr = function() {};
  Modernizr.prototype = w, Modernizr = new Modernizr;
  var x = n.documentElement,
    _ = "svg" === x.nodeName.toLowerCase(),
    S = "Moz O ms Webkit",
    b = w._config.usePrefixes ? S.split(" ") : [];
  w._cssomPrefixes = b;
  var E = w._config.usePrefixes ? S.toLowerCase().split(" ") : [];
  w._domPrefixes = E;
  var P = {
    elem: a("modernizr")
  };
  Modernizr._q.push(function() {
    delete P.elem
  });
  var z = {
    style: P.elem.style
  };
  Modernizr._q.unshift(function() {
    delete z.style
  }), w.testAllProps = v, w.testAllProps = y, Modernizr.addTest("flexbox", y("flexBasis", "1px", !0)), o(), s(g), delete w.addTest, delete w.addAsyncTest;
  for (var N = 0; N < Modernizr._q.length; N++) Modernizr._q[N]();
  e.Modernizr = Modernizr
}(window, document);

＆＃13;

.support-container {
  display: none;
}
.no-flexbox .support-container {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #CE3426;
  padding: 100px;
}
.support-container__update-browser {
  color: #ffffff;
  font-size: 2em;
}
.support-container__can-i-use {
  font-size: 1.2em;
  font-style: italic;
  color: #dddddd;
}
.support-container__update-browser a,
.support-container__can-i-use a {
  background-color: #ffffff;
  text-decoration: underline;
  padding: 0 3px;
  border-radius: 4px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

＆＃13;

<div class="support-container">
  <div id="browserupgrade" class="support-container__update-browser">
    <p>Dear user, you are using an outdated browser. Please
      <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  </div>
  <div class="support-container__can-i-use">
    <p>
      For more browser support info click
      <a href="http://caniuse.com/#feat=flexbox">here</a>
      .
    </p>
  </div>
</div>

＆＃13;

进一步解释：

Modernizr检查浏览器是否支持您的自定义功能，在本例中为flexbox。如果浏览器不支持，则Modernizr会在您的<html>标记中添加一个类。像这样：<html class="no-flexbox>。您可以在样式表中方便地使用它。

此外，您可以添加一个功能来检测用户的浏览器并将其添加到更新浏览器消息中，以获得更好的用户体验。信用：kennebec

navigator.sayswho= (function(){
    var ua= navigator.userAgent, tem,
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

Answer 6

好的，我还建议使用public class MainPage extends BasePage { public MainPage(WebDriver driver) { super(driver); PageFactory.initElements(new HtmlElementDecorator(new HtmlElementLocatorFactory(driver)), this); } List<Section> sections; public void iterateOverSections() { for (Section section : sections) { section.printValues(); } }（从https://modernizr.com/下载），但有点不同。我认为你的实际问题只是检测浏览器是否支持flexbox，而不是它是否是特定的浏览器或浏览器版本。

安装并加载页面后，modernizr会将类放入modernizr标记。关于flexbox，它会将类<body>或类.flexbox放入body标签，如.no-flexbox（实际上还有更多类，除非你只为flexbox下载一个modernizr自定义构建）。因此，您可以使用一个简单的组合选择器来选择一个CSS规则，该规则选择一个DIV块，您可以在其中编写有关过时浏览器的警告。例如：

在HTML中写下如下内容：

<body class="no-flexbox bgsizecover csscalc">

在CSS样式表中，添加：

<div class="browserwarning">Your browser is outdated and cannot display this page properly! Please install an up-to-date browser, which you can get from <a href="http://www.example.com">here</a>.</div>

这将首先隐藏此消息（通过第一个规则），然后（第二个规则）仅在无法处理flexbox的浏览器中显示它，因此将.browserwarning { display: none; } .no-flexbox .browserwarning { display: block; font-size: 24px; color: red; background-color: yellow; }类放入加载页面时由modernizr创建的.no-flexbox标记：组合选择器body无论在哪里放置浏览器警告，它都可以正常工作 - 它不一定是.no-flexbox .browserwarning的直接孩子，但可以在那里的任何地方。

这肯定有用 - 我在成功的页面中使用了这个...

Answer 7

在前端，您可以使用modernizr库并检测浏览器是否支持您正在使用的现代功能。

另一件事是直接从后端重定向到特殊页面。如果您使用PHP作为后端，则可以使用get_browser函数来检测用户代理，然后加载普通页面，或者如果浏览器是不受支持的浏览器之一，则打开一个建议用户升级的页面。

http://php.net/manual/en/function.get-browser.php

Answer 8

更彻底的方法。

您可以获取您感兴趣的每个浏览器的用户代理字符串，并创建一个包含您要排除的所有浏览器的数组。

List of User Agent Strings

使用navigator.userAgent获取访问者的用户代理，并使用jQuery inArray()

检查它是否在您的不支持的浏览器数组中

对于使用匹配的浏览器的访问者，可能会抛出一个简单的JavaScript警报。

以下是获取浏览器相关信息的示例（示例来源：w3schools.com）

var txt = "";
txt += "<p>User-agent header: " + navigator.userAgent + "</p>";
txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt += "<p>Browser Name: " + navigator.appName + "</p>";
txt += "<p>Browser Version: " + navigator.appVersion + "</p>";
txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt += "<p>Browser Language: " + navigator.language + "</p>";
txt += "<p>Browser Online: " + navigator.onLine + "</p>";
txt += "<p>Platform: " + navigator.platform + "</p>";

document.getElementById("demo").innerHTML = txt;

<div id="demo"></div>

<强>更新

这是一种非常简单的方法，不涉及第三方API。只需使用UAparser.js即可过滤结果。您需要检查的部分是浏览器名称和版本。请查看以下示例

var parser = new UAParser();
 var thisBrowser = parser.getBrowser();
 var thisOS = parser.getOS();
  switch(true) {
    case (thisBrowser.name=="IE" && thisBrowser.version<=10) :
      alert("IE versions older than v11 are not supported");
    break;
    case (thisBrowser.name=="Safari" && (thisBrowser.version>=7 || thisBrowser.version<9)):
      alert("Safari versions 7 and 8 are not supported");
    break;
    case (thisBrowser.name=="Android Webkit Browser" && thisBrowser.version<4.4):
      alert("Default browser of Android OS versions older than v4.4 are not supported.");
    break;
    case (thisBrowser.name=="UC Browser" && thisOS.name=="Android"):
      alert("UC browser versions for Android are not supported.");
    break;
    case (thisBrowser.name=="Opera Mini" && thisBrowser.version<8):
      alert("Default browser of Android OS versions older than v4.4 are not supported.");
    break;
    default:
    alert("Great this is a supported browser");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.10/ua-parser.min.js"></script>

Answer 9

您还可以在样式表中插入前缀。检查浏览器样式属性是否实际支持已存在的样式属性，或稍后动态插入。它主要用于动画，但可以修改以测试浏览器中的任何css样式属性。如果props中已存在stylesheet，则会在stylesheet中插入供应商前缀。如果稍后动态插入道具，也会插入供应商前缀，或将其附加到这些道具上。

例如，为animation，backface-visibility，border-radius，box-shadow，transform，transform-style，transition添加前缀;还在@keyframes

设置前缀

(function prefix() {
    // var el = $(selector).get(0), i.e.g, $("body").get(0), $("#animated").get(0)
    var prefixes = {"MozAnimation": "-moz-","webkitAnimation": "-webkit-"
                   ,"msAnimation": "-ms-","oAnimation": "-o-"};
    var props = ["animation", "backface-visibility", "border-radius"
                , "box-shadow", "transform", "transform-style", "transition"];
    $.each(prefixes, function(key, val) {
        $("style")
        .attr({"data-prefix": val,"class": String(val).replace(/-/g, "")});
        return !(key in el.style);
    });
    $.each(props, function(index, value) {
        var cssPrefix = $("style").attr("data-prefix");
        if (value in el.style === false) {
            $.fn.pfx = function(prop, pfxprop, q) {
                return $("style").html($("style").text()
                       .replace(new RegExp(prop, "g"), q 
                       + $("style").attr("data-prefix") + pfxprop))
            };
            $("style").pfx("@keyframes", "keyframes", "@")
            .pfx(value, value, "");
        };
    });
}());

github https://github.com/guest271314/prefix/blob/master/prefix.1.1.min.js

Answer 10

您可以使用UAParser.js。它可以为您提供浏览器名称，版本，操作系统等。这是一个example。

它甚至有jQuery plugin。

var parser = new UAParser();
var browser = parser.getBrowser();

// leave only the major version and minor in order to compare
// eg 12.2.4 > 12.2
var secondDot = browser.version.indexOf(".", browser.version.indexOf(".") + 1);
browser.version = parseFloat(browser.version.substr(0, secondDot));

// debugging
$("#browserName").html(browser.name);
$("#browserVersion").html(browser.version);

if (["IE", "Safari", "Opera Mobi", "UCBrowser", "Android Browser"].indexOf(browser.name) != -1) {
    if (browser.name == "IE" && browser.version <= 10) {
        $("#browserupgrade").show();
    }
    if (browser.name == "Safari" && browser.version <= 10) {
        $("#browserupgrade").show();
    }
    if (browser.name == "UCBrowser") {
        $("#browserupgrade").show();
    }
    if (browser.name == "Android Browser" && browser.version <= 4.4) {
        $("#browserupgrade").show();
    }
}

Answer 11

这一行将检查ie10，如果是ie10则返回true，否则返回false。

var ie10 = /MSIE 10/i.test(navigator.userAgent) && /MSIE 10/i.test(navigator.vendor);

我的学习在这里：https://blogs.msdn.microsoft.com/ie/2011/04/15/the-ie10-user-agent-string/

用例

选项1

 if(ie10){

    //Do something

    }

更新：

Microsoft浏览器使用@cc_on，它允许您通过脚本启动条件注释。

选项2：

<script>
/*@cc_on

 @if (@_jscript_version == 10){

 document.write("You are using IE10");
}
@*/
</script>

仅供参考。只有EI 10及以下版本不支持flexbox css。证明：http://caniuse.com/#feat=flexbox

希望这有帮助

Answer 12

请参阅：https://browser-update.org/

<script> 
var $buoop = {c:2}; 
function $buo_f(){ 
 var e = document.createElement("script"); 
 e.src = "//browser-update.org/update.min.js"; 
 document.body.appendChild(e);
};
try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
catch(e){window.attachEvent("onload", $buo_f)}
</script>

Answer 13

还是另一种轻量级方法？

如果您通过nginx为您的网页提供服务，那么非常有用的指令ancient_browser。

您需要设置一个您不希望支持的浏览器列表：

ancient_browser msie 9.0;

然后将它们重定向到特殊的浏览器升级页面：

if ($ancient_browser) {
    rewrite ^ /install-chrome.html;
}

这样您就不会污染现有的网页，也不需要为不需要的用户加载额外的css。

Answer 14

您可以使用以下功能获取浏览器名称和版本：

function get_browser() {
        var ua = navigator.userAgent, tem, M = ua
                .match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i)
                || [];
        if (/trident/i.test(M[1])) {
            tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
            return 'IE ' + (tem[1] || '');
        }
        if (M[1] === 'Chrome') {
            tem = ua.match(/\bOPR\/(\d+)/)
            if (tem != null) {
                return 'Opera ' + tem[1];
            }
        }
        M = M[2] ? [ M[1], M[2] ] : [ navigator.appName, navigator.appVersion,
                '-?' ];
        if ((tem = ua.match(/version\/(\d+)/i)) != null) {
            M.splice(1, 1, tem[1]);
        }
        return M[0];
    }

    function get_browser_version() {
        var ua = navigator.userAgent, tem, M = ua
                .match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i)
                || [];
        if (/trident/i.test(M[1])) {
            tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
            return 'IE ' + (tem[1] || '');
        }
        if (M[1] === 'Chrome') {
            tem = ua.match(/\bOPR\/(\d+)/)
            if (tem != null) {
                return 'Opera ' + tem[1];
            }
        }
        M = M[2] ? [ M[1], M[2] ] : [ navigator.appName, navigator.appVersion,
                '-?' ];
        if ((tem = ua.match(/version\/(\d+)/i)) != null) {
            M.splice(1, 1, tem[1]);
        }
        return M[1];
    }

，您可以使用以下代码提醒用户更新浏览器。

    jQuery(document).ready(function() {
        var browser = get_browser();
        var browser_version = get_browser_version();
        if (browser == "Chrome" && browser_version <= 30) {
            alert("Your browser is below the minimum required version. Please update your browser for this site to function properly");
        }
        if (browser == "Firefox" && browser_version <= 25) {
            alert("Your browser is below the minimum required version. Please update your browser for this site to function properly");
        }
        if (browser == "MSIE" && browser_version <= 8) {
            alert("Your browser is below the minimum required version. Please update your browser for this site to function properly");
        }
    });

Answer 15

试试这个：

navigator.browser = (function() {
    var ua = navigator.userAgent, tem,
        M  = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if (/trident/i.test(M[1])) {
        tem =  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if (M[1]=== 'Chrome') {
        tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
        if (tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if ((tem = ua.match(/version\/(\d+)/i))!= null)
        M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

但是你正试图重新发明轮子，你可以使用Modernizr：

if (Modernizr.flexbox) {
  // Modern Flexbox supported
}
else {
  // Flexbox syntax not supported
}

我想要让网站访问者升级他们的浏览器

解决方案

15 个答案:

PREMISE

要求

解

注意

旧语法

火狐

Internet Explorer 11

Opera Mini

更新