JavaScript 设备和浏览器类型检测

最新推荐文章于 2024-07-18 10:24:18 发布

迷恋1

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量90

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/zhoutao5688/article/details/139266386

版权

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备和浏览器类型检测</title>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            function detectDeviceType() {
                const userAgent = navigator.userAgent.toLowerCase();

                if (/mobile|android|iphone|ipod/i.test(userAgent)) {
                    return 'Mobile';
                } else if (/ipad|tablet|playbook|silk|android(?!.*mobile)/i.test(userAgent)) {
                    return 'Tablet';
                } else {
                    return 'Desktop';
                }
            }

            function detectBrowser() {
                const userAgent = navigator.userAgent.toLowerCase();

                if (/edg|edge|edgios|edga|edg/i.test(userAgent)) {
                    return 'Edge';
                } else if (/opr\//i.test(userAgent) || /opera/i.test(userAgent)) {
                    return 'Opera';
                } else if (/chrome|crios|crmo/i.test(userAgent) && !/edg/i.test(userAgent)) {
                    return 'Chrome';
                } else if (/firefox|fxios/i.test(userAgent)) {
                    return 'Firefox';
                } else if (/safari/i.test(userAgent) && !/chrome|crios|crmo|edg/i.test(userAgent)) {
                    return 'Safari';
                } else if (/msie|trident/i.test(userAgent)) {
                    return 'Internet Explorer';
                } else {
                    return 'Other';
                }
            }

            const deviceType = detectDeviceType();
            const browserType = detectBrowser();

            document.getElementById('device-info').textContent = `Device Type: ${deviceType}`;
            document.getElementById('browser-info').textContent = `Browser: ${browserType}`;
            document.getElementById('userAgent').textContent = `userAgent: ${navigator.userAgent.toLowerCase()}`;
        });
    </script>
</head>
<body>
    <div>
        <p id="device-info">Detecting device...</p>
        <p id="browser-info">Detecting browser...</p>
        <p id="userAgent">Detecting browser...</p>
    </div>
</body>
</html>