工具介绍

屏幕信息检测工具是一款基于纯前端技术开发的实用工具，能够在浏览器端全面检测和展示设备的屏幕、浏览器、硬件等多维度信息。无需安装任何插件，打开网页即可获取详细的设备参数。

在线体验

核心功能

1. 屏幕基本信息

检测项 说明
屏幕分辨率 显示设备的物理像素尺寸
可用屏幕尺寸 排除系统任务栏后的可用区域
屏幕颜色深度 显示器的色彩位数（通常为24/32位）
像素深度 每个像素的比特数

2. 设备信息检测

  • 设备像素比 (DPR)：视网膜屏通常为 2 或 3
  • 窗口尺寸：浏览器外窗口和内窗口的宽高
  • 设备类型：自动识别 PC / 手机 / 平板

3. 显示器详细参数

1
2
3
4
5
6
7
8
9
10
11
12
// 计算屏幕物理DPI
function getDPI() {
    const div = document.createElement('div');
    div.style.cssText = 'width:1in;height:1in;position:absolute;left:-100%;top:-100%;';
    document.body.appendChild(div);
    const dpi = {
        x: Math.round(div.offsetWidth * 96 / 25.4),
        y: Math.round(div.offsetHeight * 96 / 25.4)
    };
    document.body.removeChild(div);
    return dpi;
}

检测内容包括：

  • 屏幕缩放比例（如 100%、125%、150%）
  • 物理 DPI 和逻辑 DPI
  • 屏幕尺寸（英寸）
  • 屏幕宽高比（如 16:9、16:10）

4. 移动设备精准识别

检测目标 识别方式
微信小程序 UserAgent 特征匹配
Android 设备 /android|adr/i
iOS 设备 /iphone|ipad|ipod/i
iPhone / iPad 分别识别
Windows Phone legacy 设备支持

5. 浏览器与系统信息

  • 浏览器缩放比例：实时检测页面缩放状态
  • 视口尺寸：可视区域宽高
  • 系统语言：navigator.language
  • 时区信息：Intl.DateTimeFormat().resolvedOptions().timeZone

6. 硬件与性能信息

1
2
3
4
5
6
7
8
// 硬件并发数（CPU逻辑核心数）
navigator.hardwareConcurrency  // 如：8

// 设备内存（近似值，单位GB）
navigator.deviceMemory  // 如：8

// 网络连接类型
navigator.connection?.type  // wifi / 4g / 等

7. 功能支持检测

检测浏览器对以下技术的支持情况：

  • ✅ WebGL 支持
  • ✅ Canvas 2D 支持
  • ✅ Touch / Pointer 事件
  • ✅ Service Worker
  • ✅ WebAssembly
  • ✅ LocalStorage / SessionStorage

技术实现亮点

响应式设计

1
2
3
4
5
6
7
8
9
10
11
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}

实时更新机制

1
2
3
4
5
// 窗口大小改变时自动刷新
document.addEventListener('DOMContentLoaded', renderInfo);
window.addEventListener('resize', () => {
    setTimeout(renderInfo, 100);
});

数据导出功能

工具支持三种导出方式：

功能 实现方式
🖨️ 打印 window.open() + window.print()
💾 保存为 HTML Blob + URL.createObjectURL()
📄 保存为 PDF 打印到 PDF 驱动

应用场景

  1. 前端开发调试：快速查看当前设备的屏幕参数
  2. 响应式测试：验证不同尺寸下的布局表现
  3. 用户设备分析：收集用户设备的屏幕特征
  4. 技术支持：远程协助时获取用户设备信息
  5. 电商适配：检测用户设备类型，优化展示策略

兼容性说明

  • ✅ Chrome 60+
  • ✅ Firefox 55+
  • ✅ Safari 12+
  • ✅ Edge 79+
  • ✅ 移动端浏览器（iOS Safari、Chrome Android）

技术栈

  • 纯原生技术：无第三方依赖
  • ES6+ 语法：现代 JavaScript 特性
  • CSS Grid/Flexbox：现代布局方案
  • 响应式设计：适配各种屏幕尺寸

总结

屏幕信息检测工具是一个轻量级但功能全面的实用工具，它充分利用了浏览器提供的 window.screen、navigator 等 API，结合 JavaScript 的计算能力，为用户提供了详尽的设备和屏幕信息展示。无论是日常开发调试还是技术支持场景，都能发挥重要作用。

该工具的优势在于：

  • 🚀 零依赖：纯原生实现，加载速度快
  • 📱 全平台：支持桌面端和移动端
  • 🔄 实时更新：响应窗口变化自动刷新
  • 💾 导出便捷：支持多种格式保存
  • 🎨 美观易用：现代化 UI 设计