js检测浏览器环境UA，微信浏览器，安卓浏览器,IOS设备

如何使用JavaScript的document.write输出User-Agent信息，并提供几种不同的实现方式。

基础用法：直接输出完整UA

document.write(navigator.userAgent);

完整示例：格式化输出UA信息 html

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>User Agent 检测</title>
</head>
<body>
    <script>
        // 获取User-Agent
        var ua = navigator.userAgent;
        
        // 使用document.write输出格式化信息
        document.write('<h2>浏览器User-Agent信息</h2>');
        document.write('<div style="background:#f5f5f5; padding:10px; border-radius:5px;">');
        document.write('<strong>完整UA字符串:</strong><br>');
        document.write('<code>' + ua + '</code>');
        document.write('</div><br>');
        
        // 检测浏览器类型
        document.write('<h3>浏览器检测结果:</h3>');
        document.write('<ul>');
        
        // 检测微信浏览器
        var isWeChat = /MicroMessenger/i.test(ua);
        document.write('<li>微信浏览器: ' + (isWeChat ? '是' : '否') + '</li>');
        
        // 检测安卓浏览器
        var isAndroid = /Android/i.test(ua);
        document.write('<li>安卓设备: ' + (isAndroid ? '是' : '否') + '</li>');
        
        // 检测iOS设备
        var isIOS = /iPhone|iPad|iPod/i.test(ua);
        document.write('<li>iOS设备: ' + (isIOS ? '是' : '否') + '</li>');
        
        // 检测Chrome浏览器
        var isChrome = /Chrome/i.test(ua);
        document.write('<li>Chrome浏览器: ' + (isChrome ? '是' : '否') + '</li>');
        
        document.write('</ul>');
    </script>
</body>
</html>

更简洁的版本javascript

javascript 复制代码

// 直接在页面中输出UA信息
document.write(`
    <div style="margin:20px; padding:15px; border:1px solid #ccc;">
        <h3>User Agent:</h3>
        <p>${navigator.userAgent}</p>
        <p>微信浏览器: ${/MicroMessenger/i.test(navigator.userAgent) ? '是' : '否'}</p>
        <p>安卓设备: ${/Android/i.test(navigator.userAgent) ? '是' : '否'}</p>
    </div>
`);

函数封装版本

javascript 复制代码

function detectBrowser() {
    var ua = navigator.userAgent;
    var result = {};
    
    result.isWeChat = /MicroMessenger/i.test(ua);
    result.isAndroid = /Android/i.test(ua);
    result.isIOS = /iPhone|iPad|iPod/i.test(ua);
    result.isChrome = /Chrome/i.test(ua);
    
    return result;
}

// 使用函数并输出结果
var browserInfo = detectBrowser();
document.write('<h3>浏览器检测结果:</h3>');
document.write('<pre>' + JSON.stringify(browserInfo, null, 2) + '</pre>');

注意事项

document.write的使用时机：只能在页面加载过程中使用，如果在页面加载完成后使用会覆盖整个页面内容。

更好的替代方案：现代开发中更推荐使用：

javascript 复制代码

// 使用DOM操作代替document.write
window.onload = function() {
    var infoDiv = document.createElement('div');
    infoDiv.innerHTML = 'User Agent: ' + navigator.userAgent;
    document.body.appendChild(infoDiv);
};

User-Agent的可靠性：User-Agent可以被用户修改，重要业务逻辑应该结合其他验证方式。

实时检测示例

javascript 复制代码

// 实时显示UA信息（不推荐在生产环境使用）
setInterval(function() {
    var output = document.getElementById('ua-output');
    if (output) {
        output.innerHTML = navigator.userAgent;
    }
}, 1000);

选择合适的方式根据你的具体需求来使用。如果是简单的调试，直接使用document.write(navigator.userAgent)即可；如果是正式项目，建议使用更现代的DOM操作方法。