你的浏览器在"偷偷"告诉网站什么？
今天给大家分享一个超级实用的浏览器检测工具，不需要下载任何软件，只要打开网页就能看到你设备的"所有秘密"！
✨ 这个工具到底有多神奇？
🌐 网络状态实时监控
最让人惊讶的是网络检测功能：
- 网络类型：4G、5G、WiFi一键识别 （受限于 浏览器的API，实际检测不一定准确）
- 网速测试：实时显示下行带宽和延迟
- 省流模式：连你有没有开省流量都知道
- 网络质量：优秀/良好/一般/较差，比运营商还专业
🔋 硬件信息全掌握
- 电池状态：电量百分比、充电状态、剩余时间
- 屏幕信息：分辨率、色彩深度、缩放比例
- 处理器：CPU核心数、架构类型
- GPU信息：显卡型号和厂商
- 内存使用：实时显示JavaScript内存占用
🎯 26项浏览器功能检测
最酷的是功能检测区域，一眼就能看出你的浏览器支持哪些新技术：
基础功能：Audio、Video、Cookies、Canvas、SVG、WebGL
前沿技术：ES6箭头函数、WebWorkers、WebSocket、Web Crypto
移动特性：触摸事件、震动API、地理定位、全屏API
绿色标签 = 支持 ✅
红色标签 = 不支持 ❌
小技巧：如果你的浏览器绿色标签很少，说明该升级了！
🛡️ 隐私安全吗？
很多朋友担心隐私问题，这里可以放心：
✅ 纯前端检测：所有信息都在本地获取，不会上传到服务器
✅ 开源透明：代码完全公开，没有任何隐藏功能
✅ 无需权限：不需要获取任何敏感权限
✅ 离线可用：下载后可以本地使用
💻 开发者福利
对程序员来说，这个工具简直是神器：
调试必备：快速了解用户环境，定位兼容性问题
性能优化：根据设备性能调整资源加载策略
功能适配：根据浏览器支持情况选择技术方案
用户画像：了解访客的设备分布和网络环境
🎨 界面设计超级棒
不得不说，这个工具的颜值也很能打：
- 渐变背景：科技感满满的蓝色渐变
- 卡片布局：清爽的表格设计，信息层次分明
- 响应式：手机电脑都能完美显示
- 动画效果：悬停动画和刷新特效，体验丝滑
⚡ 源码特色
这个工具的代码质量也很高：
- 兼容性强：支持所有主流浏览器
- 检测全面：涵盖系统、硬件、网络、功能四大类
- 实时更新：电池、网络状态变化自动刷新
- 代码规范：注释详细，易于理解和二次开发
效果图
PC端
移动端
🌐在线体验地址
🎁 完整源码分享
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浏览器信息</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 50%, #74b9ff 100%);
min-height: 100vh;
padding: 20px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 100%;
max-width: 1200px;
min-height: 80vh;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
display: flex;
flex-direction: column;
}
.header {
background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
padding: 25px;
text-align: center;
color: white;
position: relative;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
opacity: 0.3;
}
.header h1 {
font-size: 28px;
font-weight: 400;
position: relative;
z-index: 1;
}
.info-table {
background: white;
flex: 1;
display: flex;
flex-direction: column;
}
.info-row {
display: flex;
border-bottom: 1px solid #e5e5e5;
transition: background-color 0.2s ease;
min-height: 60px;
}
.info-row:hover {
background-color: #f8f9fa;
}
.info-row:last-child {
border-bottom: none;
}
.info-label {
width: 160px;
padding: 20px;
background: #f1f3f4;
color: #333;
font-weight: 500;
border-right: 1px solid #e5e5e5;
display: flex;
align-items: center;
font-size: 15px;
}
.info-value {
flex: 1;
padding: 20px;
color: #555;
word-break: break-all;
line-height: 1.6;
font-size: 15px;
display: flex;
align-items: center;
}
.feature-container {
padding: 0;
align-items: stretch;
}
.feature-value {
flex: 1;
padding: 15px 20px;
display: block;
}
.feature-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
width: 100%;
}
.feature-item {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
border-radius: 15px;
font-size: 12px;
font-weight: 500;
text-align: center;
color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
white-space: nowrap;
min-width: 70px;
}
.feature-item:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.feature-supported {
background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
}
.feature-unsupported {
background: linear-gradient(135deg, #e17055 0%, #d63031 100%);
}
.plugin-list {
max-height: 200px;
overflow-y: auto;
font-size: 13px;
line-height: 1.4;
}
.plugin-item {
padding: 5px 0;
border-bottom: 1px solid #f0f0f0;
}
.plugin-item:last-child {
border-bottom: none;
}
.plugin-name {
font-weight: 500;
color: #333;
}
.plugin-desc {
color: #777;
font-size: 12px;
margin-top: 2px;
}
.battery-info {
display: flex;
align-items: center;
gap: 10px;
}
.battery-bar {
width: 50px;
height: 20px;
border: 2px solid #ddd;
border-radius: 3px;
position: relative;
background: #f5f5f5;
}
.battery-bar::after {
content: '';
position: absolute;
right: -6px;
top: 6px;
width: 3px;
height: 8px;
background: #ddd;
border-radius: 0 2px 2px 0;
}
.battery-fill {
height: 100%;
border-radius: 1px;
transition: all 0.3s ease;
}
.connection-info {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.connection-tag {
padding: 4px 8px;
background: #e3f2fd;
color: #1976d2;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.refresh-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
border: none;
border-radius: 50%;
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(116, 185, 255, 0.4);
transition: all 0.3s ease;
z-index: 1000;
}
.refresh-btn:hover {
transform: scale(1.1) rotate(180deg);
box-shadow: 0 6px 20px rgba(116, 185, 255, 0.6);
}
.loading {
color: #999;
font-style: italic;
}
@media (max-width: 768px) {
.info-row {
flex-direction: column;
}
.info-label {
width: 100%;
border-right: none;
border-bottom: 1px solid #e5e5e5;
}
.feature-value {
padding: 10px 15px;
}
.feature-grid {
gap: 6px;
}
.feature-item {
font-size: 11px;
padding: 5px 8px;
min-width: 60px;
}
}
.scrollbar::-webkit-scrollbar {
width: 6px;
}
.scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.scrollbar::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>浏览器信息</h1>
</div>
<div class="info-table">
<div class="info-row">
<div class="info-label">操作系统</div>
<div class="info-value" id="os">检测中...</div>
</div>
<div class="info-row">
<div class="info-label">浏览器版本</div>
<div class="info-value" id="browser">检测中...</div>
</div>
<div class="info-row">
<div class="info-label">请求头</div>
<div class="info-value" id="userAgent">检测中...</div>
</div>
<div class="info-row">
<div class="info-label">屏幕</div>
<div class="info-value" id="screen">检测中...</div>
</div>
<div class="info-row">
<div class="info-label">语言</div>
<div class="info-value" id="language">检测中...</div>
</div>
<div class="info-row">
<div class="info-label">时区</div>
<div class="info-value" id="timezone">检测中...</div>
</div>
<div class="info-row">
<div class="info-label">网络连接</div>
<div class="info-value" id="connection">检测中...</div>
</div>
<div class="info-row">
<div class="info-label">电池</div>
<div class="info-value" id="battery">检测中...</div>
</div>
<div class="info-row">
<div class="info-label">内存信息</div>
<div class="info-value" id="memory">检测中...</div>
</div>
<div class="info-row">
<div class="info-label">处理器</div>
<div class="info-value" id="processor">检测中...</div>
</div>
<div class="info-row">
<div class="info-label">GPU信息</div>
<div class="info-value" id="gpu">检测中...</div>
</div>
<div class="info-row feature-container">
<div class="info-label">其他功能<br><small>绿色代表支持</small></div>
<div class="feature-value">
<div class="feature-grid" id="features">检测中...</div>
</div>
</div>
</div>
</div>
<button class="refresh-btn" onclick="refreshInfo()" title="刷新信息">
🔄
</button>
<script>
function detectOS() {
const platform = navigator.platform;
const userAgent = navigator.userAgent;
if (userAgent.indexOf('Android') !== -1) {
const version = userAgent.match(/Android ([0-9.]+)/);
return 'Android ' + (version ? version[1] : 'Unknown');
}
if (userAgent.indexOf('iPhone') !== -1 || userAgent.indexOf('iPad') !== -1) {
const version = userAgent.match(/OS ([0-9_]+)/);
return 'iOS ' + (version ? version[1].replace(/_/g, '.') : 'Unknown');
}
if (userAgent.indexOf('Windows NT 10.0') !== -1) return 'Windows 10/11 ' + (navigator.userAgentData?.platform || platform);
if (userAgent.indexOf('Windows NT 6.3') !== -1) return 'Windows 8.1 ' + platform;
if (userAgent.indexOf('Windows NT 6.2') !== -1) return 'Windows 8 ' + platform;
if (userAgent.indexOf('Windows NT 6.1') !== -1) return 'Windows 7 ' + platform;
if (userAgent.indexOf('Windows') !== -1) return 'Windows ' + platform;
if (userAgent.indexOf('Mac OS X') !== -1) {
const version = userAgent.match(/Mac OS X ([0-9_]+)/);
return 'macOS ' + (version ? version[1].replace(/_/g, '.') : 'Unknown');
}
if (userAgent.indexOf('Linux') !== -1) {
const arch = userAgent.indexOf('x86_64') !== -1 ? 'x86_64' :
userAgent.indexOf('i686') !== -1 ? 'i686' : 'Unknown';
return 'Linux ' + arch + ' ' + (navigator.language || 'zh-CN');
}
return platform || '未知系统';
}
function detectBrowser() {
const userAgent = navigator.userAgent;
if (userAgent.indexOf('Edg') !== -1) {
const version = userAgent.match(/Edg\/([0-9.]+)/);
const engine = 'Chromium(' + (userAgent.match(/Chrome\/([0-9.]+)/) || ['', 'Unknown'])[1] + ')';
return 'Microsoft Edge(' + (version ? version[1] : 'Unknown') + ') ' + engine;
}
if (userAgent.indexOf('Chrome') !== -1 && userAgent.indexOf('Edg') === -1) {
const version = userAgent.match(/Chrome\/([0-9.]+)/);
return 'Google Chrome(' + (version ? version[1] : 'Unknown') + ')';
}
if (userAgent.indexOf('Firefox') !== -1) {
const version = userAgent.match(/Firefox\/([0-9.]+)/);
return 'Mozilla Firefox(' + (version ? version[1] : 'Unknown') + ')';
}
if (userAgent.indexOf('Safari') !== -1 && userAgent.indexOf('Chrome') === -1) {
const version = userAgent.match(/Version\/([0-9.]+)/);
return 'Safari(' + (version ? version[1] : 'Unknown') + ')';
}
if (userAgent.indexOf('Opera') !== -1 || userAgent.indexOf('OPR') !== -1) {
const version = userAgent.match(/(Opera|OPR)\/([0-9.]+)/);
return 'Opera(' + (version ? version[2] : 'Unknown') + ')';
}
return '未知浏览器';
}
function getScreenInfo() {
const width = screen.width;
const height = screen.height;
const colorDepth = screen.colorDepth;
const pixelRatio = window.devicePixelRatio || 1;
return `${width}*${height}(${colorDepth}位) 缩放比例:${pixelRatio}`;
}
function getLanguageInfo() {
const languages = navigator.languages || [navigator.language];
const primary = navigator.language || 'zh-CN';
const all = languages.join(', ');
return `${primary} (支持: ${all})`;
}
function getTimezoneInfo() {
try {
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const offset = new Date().getTimezoneOffset();
const offsetHours = Math.abs(offset / 60);
const offsetSign = offset <= 0 ? '+' : '-';
const now = new Date().toLocaleString('zh-CN');
return `${timezone} (UTC${offsetSign}${offsetHours}) 当前时间: ${now}`;
} catch (e) {
return '时区信息不可用';
}
}
function getConnectionInfo() {
const connectionInfo = [];
// 基础在线状态
const onlineStatus = navigator.onLine ? '在线' : '离线';
connectionInfo.push(`状态: ${onlineStatus}`);
// 获取连接对象（兼容不同浏览器）
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
// 连接类型检测
if (connection.type) {
const connectionTypes = {
'wifi': 'WiFi',
'ethernet': '以太网',
'cellular': '移动网络',
'bluetooth': '蓝牙',
'wimax': 'WiMAX',
'other': '其他',
'none': '无连接',
'unknown': '未知'
};
const connType = connectionTypes[connection.type] || connection.type;
connectionInfo.push(`连接: ${connType}`);
}
// 网络技术检测
if (connection.effectiveType) {
let networkTech = connection.effectiveType.toUpperCase();
// 5G检测增强
if (connection.downlink && connection.rtt) {
// 基于速度和延迟推断5G
if (connection.downlink > 100 && connection.rtt < 20) {
networkTech = '5G (推测)';
} else if (connection.downlink > 50 && connection.rtt < 30) {
networkTech = '5G/4G+ (高速)';
} else if (networkTech === '4G' && connection.downlink > 25) {
networkTech = '4G+';
}
}
// 特殊情况：WiFi下的移动网络检测
if (connection.type === 'wifi' && connection.effectiveType) {
const effectiveType = connection.effectiveType.toUpperCase();
if (connection.downlink > 80) {
networkTech = `WiFi (疑似5G热点)`;
} else if (effectiveType === '4G') {
networkTech = `WiFi (可能4G热点)`;
} else {
networkTech = `WiFi (${effectiveType}技术)`;
}
}
connectionInfo.push(`技术: ${networkTech}`);
}
// 网络性能参数
if (connection.downlink) {
const downlink = connection.downlink;
let speedDesc = '';
if (downlink > 100) speedDesc = ' (极快)';
else if (downlink > 50) speedDesc = ' (很快)';
else if (downlink > 25) speedDesc = ' (快速)';
else if (downlink > 10) speedDesc = ' (中等)';
else speedDesc = ' (较慢)';
connectionInfo.push(`下行: ${downlink}Mbps${speedDesc}`);
}
if (connection.rtt) {
const rtt = connection.rtt;
let latencyDesc = '';
if (rtt < 20) latencyDesc = ' (极低)';
else if (rtt < 50) latencyDesc = ' (低)';
else if (rtt < 100) latencyDesc = ' (中等)';
else if (rtt < 200) latencyDesc = ' (较高)';
else latencyDesc = ' (很高)';
connectionInfo.push(`延迟: ${rtt}ms${latencyDesc}`);
}
// 5G特征检测
if (connection.downlink && connection.rtt) {
const is5GLike = connection.downlink > 80 && connection.rtt < 25;
const is4GPlus = connection.downlink > 30 && connection.rtt < 50;
if (is5GLike) {
connectionInfo.push('🚀 5G级别性能');
} else if (is4GPlus) {
connectionInfo.push('⚡ 4G+级别性能');
}
}
// 省流模式
if (connection.saveData !== undefined) {
connectionInfo.push(`省流: ${connection.saveData ? '开启' : '关闭'}`);
}
// 网络变化监听
if (connection.addEventListener) {
connection.addEventListener('change', () => {
setTimeout(() => {
document.getElementById('connection').textContent = getConnectionInfo();
}, 100);
});
}
} else {
// 降级方案：通过其他方式检测网络
connectionInfo.push('详细信息不可用');
// 尝试通过其他API获取网络信息
if ('serviceWorker' in navigator) {
// 可以通过Service Worker监听网络变化
connectionInfo.push('(可监听网络变化)');
}
}
// 额外的网络检测
try {
// 检测是否支持新的网络API
if ('NetworkInformation' in window) {
connectionInfo.push('支持网络信息API');
}
// IPv6支持检测（间接）
if (location.hostname.includes(':')) {
connectionInfo.push('IPv6地址');
}
} catch (e) {
// 忽略错误
}
return connectionInfo.join(' | ');
}
async function getBatteryInfo() {
if ('getBattery' in navigator) {
try {
const battery = await navigator.getBattery();
const level = Math.round(battery.level * 100);
const charging = battery.charging ? '充电中' : '未充电';
let timeInfo = '';
if (battery.charging && battery.chargingTime !== Infinity) {
const hours = Math.floor(battery.chargingTime / 3600);
const minutes = Math.floor((battery.chargingTime % 3600) / 60);
timeInfo = ` (${hours}小时${minutes}分钟充满)`;
} else if (!battery.charging && battery.dischargingTime !== Infinity) {
const hours = Math.floor(battery.dischargingTime / 3600);
const minutes = Math.floor((battery.dischargingTime % 3600) / 60);
timeInfo = ` (${hours}小时${minutes}分钟后耗尽)`;
}
const batteryHtml = `
<div class="battery-info">
<div class="battery-bar">
<div class="battery-fill" style="width: ${level}%; background: ${level > 20 ? '#4CAF50' : '#F44336'};"></div>
</div>
<span>${level}%(${charging})${timeInfo}</span>
</div>
`;
return batteryHtml;
} catch (e) {
return '电池信息获取失败';
}
}
return '电池API不支持';
}
function getMemoryInfo() {
if ('memory' in performance) {
const memory = performance.memory;
const used = Math.round(memory.usedJSHeapSize / 1024 / 1024);
const total = Math.round(memory.totalJSHeapSize / 1024 / 1024);
const limit = Math.round(memory.jsHeapSizeLimit / 1024 / 1024);
return `已使用: ${used}MB / 总计: ${total}MB / 限制: ${limit}MB`;
}
if ('deviceMemory' in navigator) {
return `设备内存: ${navigator.deviceMemory}GB (估算)`;
}
return '内存信息不可用';
}
function getProcessorInfo() {
const cores = navigator.hardwareConcurrency || '未知';
const platform = navigator.platform;
let architecture = '未知';
if (navigator.userAgent.indexOf('x86_64') !== -1 || navigator.userAgent.indexOf('Win64') !== -1) {
architecture = 'x64';
} else if (navigator.userAgent.indexOf('i386') !== -1 || navigator.userAgent.indexOf('i686') !== -1) {
architecture = 'x86';
} else if (navigator.userAgent.indexOf('ARM') !== -1) {
architecture = 'ARM';
}
return `核心数: ${cores} | 架构: ${architecture} | 平台: ${platform}`;
}
function getGPUInfo() {
try {
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (gl) {
const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
if (debugInfo) {
const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
return `${vendor} - ${renderer}`;
}
const vendor = gl.getParameter(gl.VENDOR);
const renderer = gl.getParameter(gl.RENDERER);
return `${vendor} - ${renderer}`;
}
return 'WebGL不支持，GPU信息不可用';
} catch (e) {
return 'GPU信息获取失败';
}
}
function getPluginsList() {
if (navigator.plugins && navigator.plugins.length > 0) {
let pluginsHtml = '';
for (let i = 0; i < navigator.plugins.length; i++) {
const plugin = navigator.plugins[i];
pluginsHtml += `
<div class="plugin-item">
<div class="plugin-name">${plugin.name}</div>
<div class="plugin-desc">${plugin.description || '无描述'}</div>
</div>
`;
}
return pluginsHtml;
} else {
return '<div class="plugin-item"><div class="plugin-name">无插件检测到</div><div class="plugin-desc">现代浏览器通常不显示插件信息</div></div>';
}
}
function getFeatures() {
const features = [
{ name: 'Audio', supported: (() => {
try {
const audio = new Audio();
return !!(audio.canPlayType && audio.canPlayType('audio/mpeg'));
} catch (e) { return false; }
})() },
{ name: 'Video', supported: (() => {
try {
const video = document.createElement('video');
return !!(video.canPlayType && video.canPlayType('video/mp4'));
} catch (e) { return false; }
})() },
{ name: 'Cookies', supported: navigator.cookieEnabled },
{ name: 'Canvas', supported: (() => {
try {
const canvas = document.createElement('canvas');
return !!(canvas.getContext && canvas.getContext('2d'));
} catch (e) { return false; }
})() },
{ name: 'SVG', supported: (() => {
try {
return !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect);
} catch (e) { return false; }
})() },
{ name: 'WebGL', supported: (() => {
try {
const canvas = document.createElement('canvas');
return !!(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
} catch (e) { return false; }
})() },
{ name: 'CSS动画', supported: (() => {
try {
return CSS.supports('animation-name', 'test') || 'animation' in document.documentElement.style;
} catch (e) { return false; }
})() },
{ name: '圆角边框', supported: (() => {
try {
return CSS.supports('border-radius', '5px') || 'borderRadius' in document.documentElement.style;
} catch (e) { return false; }
})() },
{ name: '阴影', supported: (() => {
try {
return CSS.supports('box-shadow', '0 0 5px #000') || 'boxShadow' in document.documentElement.style;
} catch (e) { return false; }
})() },
{ name: '滤镜', supported: (() => {
try {
return CSS.supports('filter', 'blur(5px)') || 'filter' in document.documentElement.style;
} catch (e) { return false; }
})() },
{ name: 'Flexbox', supported: (() => {
try {
return CSS.supports('display', 'flex') || 'flex' in document.documentElement.style;
} catch (e) { return false; }
})() },
{ name: 'MediaQueries', supported: 'matchMedia' in window },
{ name: '透明度', supported: (() => {
try {
return CSS.supports('opacity', '0.5') || 'opacity' in document.documentElement.style;
} catch (e) { return false; }
})() },
{ name: 'ES5', supported: (() => {
try {
return !!(Array.prototype.forEach && Object.keys && JSON && Function.prototype.bind);
} catch (e) { return false; }
})() },
{ name: 'ES6箭头', supported: (() => {
try {
new Function('() => {}');
return true;
} catch (e) { return false; }
})() },
{ name: 'File API', supported: (() => {
try {
return !!(window.File && window.FileReader && window.FileList && window.Blob);
} catch (e) { return false; }
})() },
{ name: 'WebP', supported: (() => {
try {
const canvas = document.createElement('canvas');
canvas.width = 1; canvas.height = 1;
return canvas.toDataURL('image/webp').indexOf('webp') !== -1;
} catch (e) { return false; }
})() },
{ name: 'script[async]', supported: 'async' in document.createElement('script') },
{ name: 'script[defer]', supported: 'defer' in document.createElement('script') },
{ name: 'LocalStorage', supported: (() => {
try {
return 'localStorage' in window && window.localStorage !== null;
} catch (e) { return false; }
})() },
{ name: 'SessionStorage', supported: (() => {
try {
return 'sessionStorage' in window && window.sessionStorage !== null;
} catch (e) { return false; }
})() },
{ name: 'Base64', supported: (() => {
try {
return !!(window.btoa && window.atob);
} catch (e) { return false; }
})() },
{ name: 'Fullscreen', supported: (() => {
try {
const element = document.documentElement;
return !!(element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen || element.msRequestFullscreen);
} catch (e) { return false; }
})() },
{ name: 'JSON', supported: (() => {
try {
return !!(window.JSON && JSON.parse && JSON.stringify);
} catch (e) { return false; }
})() },
{ name: 'WebWorkers', supported: 'Worker' in window },
{ name: 'WebSocket', supported: 'WebSocket' in window },
{ name: 'Geolocation', supported: 'geolocation' in navigator },
{ name: 'History API', supported: !!(window.history && history.pushState) },
{ name: 'Drag & Drop', supported: 'ondragstart' in document.createElement('div') },
{ name: 'Touch Events', supported: 'ontouchstart' in window },
{ name: 'Vibration', supported: 'vibrate' in navigator },
{ name: 'Web Crypto', supported: 'crypto' in window && 'subtle' in window.crypto }
];
return features.map(feature =>
`<div class="feature-item ${feature.supported ? 'feature-supported' : 'feature-unsupported'}">${feature.name}</div>`
).join('');
}
async function loadInfo() {
document.getElementById('os').textContent = detectOS();
document.getElementById('browser').textContent = detectBrowser();
document.getElementById('userAgent').textContent = navigator.userAgent;
document.getElementById('screen').textContent = getScreenInfo();
document.getElementById('language').textContent = getLanguageInfo();
document.getElementById('timezone').textContent = getTimezoneInfo();
document.getElementById('connection').textContent = getConnectionInfo();
document.getElementById('battery').innerHTML = await getBatteryInfo();
document.getElementById('memory').textContent = getMemoryInfo();
document.getElementById('processor').textContent = getProcessorInfo();
document.getElementById('gpu').textContent = getGPUInfo();
document.getElementById('features').innerHTML = getFeatures();
// 尝试获取高精度设备信息
if (navigator.userAgentData && navigator.userAgentData.getHighEntropyValues) {
try {
const highEntropyValues = await navigator.userAgentData.getHighEntropyValues([
'platform',
'platformVersion',
'architecture',
'model',
'uaFullVersion'
]);
// 更新操作系统信息
if (highEntropyValues.model || highEntropyValues.platformVersion) {
let enhancedOS = detectOS();
if (highEntropyValues.model) {
enhancedOS = enhancedOS.replace(/\([^)]*\)/, `(${highEntropyValues.model})`);
}
document.getElementById('os').textContent = enhancedOS;
}
} catch (error) {
// 高精度信息获取失败，使用默认检测结果
console.log('高精度设备信息获取失败:', error);
}
}
}
function refreshInfo() {
const refreshBtn = document.querySelector('.refresh-btn');
refreshBtn.style.transform = 'scale(1.1) rotate(360deg)';
// 显示加载状态
const loadingElements = ['os', 'browser', 'userAgent', 'screen', 'language', 'timezone', 'connection', 'battery', 'memory', 'processor', 'gpu', 'features'];
loadingElements.forEach(id => {
const element = document.getElementById(id);
if (element) {
element.innerHTML = '<span class="loading">刷新中...</span>';
}
});
// 重新加载信息
setTimeout(() => {
loadInfo();
refreshBtn.style.transform = 'scale(1) rotate(0deg)';
}, 500);
}
// 页面加载时执行
document.addEventListener('DOMContentLoaded', loadInfo);
// 监听电池状态变化
if ('getBattery' in navigator) {
navigator.getBattery().then(battery => {
const updateBattery = () => {
getBatteryInfo().then(info => {
document.getElementById('battery').innerHTML = info;
});
};
battery.addEventListener('chargingchange', updateBattery);
battery.addEventListener('levelchange', updateBattery);
}).catch(() => {
// 忽略错误
});
}
// 监听网络状态变化
window.addEventListener('online', () => {
document.getElementById('connection').textContent = getConnectionInfo();
});
window.addEventListener('offline', () => {
document.getElementById('connection').textContent = getConnectionInfo();
});
// 监听屏幕方向变化
window.addEventListener('orientationchange', () => {
setTimeout(() => {
document.getElementById('screen').textContent = getScreenInfo();
}, 100);
});
// 监听内存变化（如果支持）
if ('memory' in performance) {
setInterval(() => {
document.getElementById('memory').textContent = getMemoryInfo();
}, 5000);
}
// 监听网络连接变化
if ('connection' in navigator || 'mozConnection' in navigator || 'webkitConnection' in navigator) {
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
connection.addEventListener('change', () => {
document.getElementById('connection').textContent = getConnectionInfo();
});
}
</script>
</body>
</html>
🔥 写在最后
在这个数字化时代，了解自己的设备环境变得越来越重要。无论你是普通用户想了解自己的手机，还是开发者需要调试兼容性，这个工具都能给你惊喜。
最重要的是，它完全免费，无需注册，即开即用！
你觉得这个工具怎么样？欢迎在评论区分享你的检测结果，看看谁的设备配置最高！
💡 小贴士：建议收藏本文，下次需要检测设备信息时就能快速找到啦！
🏷️ 标签：#浏览器检测 #前端工具 #设备信息 #技术分享 #实用工具
如果觉得有用，别忘了点赞👍和分享哦！让更多朋友发现这个神奇的工具~
Q.E.D.
