js、css、html判断浏览器的各种版本

HTML、CSS、JS都可以用来判断浏览器的各种版本。下面我们分别介绍：

HTML判断浏览器版本

HTML中无法直接判断浏览器版本，但是可以通过UA字符串来判断。UA字符串是指User-Agent字符串，是浏览器在向服务器发送请求时，带着自己的一些信息，包括浏览器的名称、版本号等等。我们可以通过UA字符串来判断浏览器的种类以及版本。

以下是HTML中使用UA字符串判断浏览器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML中使用UA字符串判断浏览器</title>
    <script type="text/javascript">
        // 获取ua字符串
        var ua = navigator.userAgent.toLowerCase();

        // 判断浏览器
        if (ua.indexOf('msie') != -1 || ua.indexOf('trident') != -1) {
            document.write('IE浏览器');
        } else if (ua.indexOf('edge') != -1) {
            document.write('Edge浏览器');
        } else if (ua.indexOf('firefox') != -1) {
            document.write('Firefox浏览器');
        } else if (ua.indexOf('chrome') != -1) {
            document.write('Chrome浏览器');
        } else if (ua.indexOf('safari') != -1) {
            document.write('Safari浏览器');
        } else {
            document.write('其他浏览器');
        }
    </script>
</head>
<body>

</body>
</html>

上面的代码中，通过navigator.userAgent获取UA字符串，通过判断UA中包含的字符串来判断浏览器的种类和版本。

CSS判断浏览器版本

CSS中也可以通过浏览器的前缀来判断浏览器的种类和版本。例如：

/* Webkit浏览器 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .selector {
        background-color: red;
    }
}

/* Chrome浏览器 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .selector {
        background-color: green;
    }
}

/* IE浏览器 */
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    .selector {
        background-color: blue;
    }
}

上面的代码中，通过浏览器的前缀来判断浏览器的种类和版本，进而使用不同的样式。

JS判断浏览器版本

JS中可以使用navigator对象来判断浏览器的种类和版本。以下是JS中使用navigator对象判断浏览器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS中使用navigator对象判断浏览器</title>
    <script type="text/javascript">
        // 判断IE浏览器
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
            alert('IE浏览器');
        } else {
            alert('非IE浏览器');
        }

        // 判断Edge浏览器
        if (!!window.StyleMedia) {
            alert('Edge浏览器');
        } else {
            alert('非Edge浏览器');
        }

        // 判断Chrome浏览器
        if (/chrome/i.test(navigator.userAgent)) {
            alert('Chrome浏览器');
        } else {
            alert('非Chrome浏览器');
        }

        // 判断Firefox浏览器
        if (/firefox/i.test(navigator.userAgent)) {
            alert('Firefox浏览器');
        } else {
            alert('非Firefox浏览器');
        }

        // 判断Safari浏览器
        if (/safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent)) {
            alert('Safari浏览器');
        } else {
            alert('非Safari浏览器');
        }
    </script>
</head>
<body>

</body>
</html>

上面的代码中，使用navigator对象和正则表达式来判断浏览器的种类和版本。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js、css、html判断浏览器的各种版本 - Python技术站

js、css、html判断浏览器的各种版本

HTML判断浏览器版本

CSS判断浏览器版本

JS判断浏览器版本

相关文章