HomeToolsDeveloper Tools屏幕信息查看器收藏Developer ToolsDesign ToolsWeb Utilities屏幕信息查看器实时查看屏幕分辨率、视口尺寸、CSS 断点、设备像素比、颜色深度、屏幕方向和触摸支持，全部在浏览器本地读取。

相关工具宽高比计算器CSS 单位转换器User-Agent 查看器浏览器功能检测器响应式断点测试器图片尺寸调整器CSS Flexbox 演练场关于屏幕信息查看器工作原理工具通过浏览器 API 实时读取数据（window.screen、window.devicePixelRatio 等）屏幕分辨率反映显示器的像素尺寸视口尺寸是 CSS 布局区域，会随浏览器窗口大小变化设备像素比显示一个 CSS 像素对应多少物理像素（高分屏大于 1）方向和触摸数据来自 Screen Orientation API 与 navigator.maxTouchPoints每个数值都会在缩放、放大和旋转时重新读取，始终与当前窗口一致常见用途通过查看视口尺寸调试响应式布局确认当前窗口宽度激活的是哪个 CSS 断点优化图片时确认高分屏 / Retina 的像素比在假设只有指针交互之前先检查触摸能力测试富媒体或渐变时确认颜色深度与同事分享屏幕参数或写入缺陷报告测试移动网页应用的方向检测常见问题屏幕分辨率和视口尺寸有什么区别？屏幕分辨率是显示器的像素数量（例如 1920×1080）。视口尺寸是浏览器窗口内用于布局的 CSS 区域，它更小，因为不包含标签页、工具栏和滚动条等浏览器界面。响应式设计依据的是视口，而不是物理屏幕。设备像素比（DPR）是什么意思？DPR 是物理屏幕像素与 CSS 像素的比值。DPR 为 2 表示一个 CSS 像素对应 2×2 的物理像素网格，这在高分屏（Retina）上很常见。优化图片时尤其重要：在 DPR 为 2 的屏幕上，100×100 的 CSS 图片需要 200×200 的源文件才能保持清晰。CSS 断点这一行告诉我什么？它显示当前视口宽度落在哪个响应式区间，采用标准的 Tailwind 风格刻度：低于 640px 为 xs，640 起为 sm，768 起为 md，1024 起为 lg，1280 起为 xl，1536 起为 2xl。缩放窗口即可观察它的切换，从而确认断点生效的准确位置。为什么调整浏览器大小时视口尺寸会变化？视口是浏览器窗口内用于渲染页面的区域，因此调整窗口会改变它。本工具在窗口缩放、设备旋转以及设备像素比变化时都会重新读取所有数值，确保显示的始终是你眼前这个窗口的真实情况。什么是可用分辨率？可用分辨率是操作系统留给窗口使用的屏幕部分，不包括 Windows 任务栏或 macOS 程序坞等保留区域。它始终等于或小于完整的屏幕分辨率。什么是物理分辨率？它为何与屏幕分辨率不同？屏幕分辨率以 CSS 像素为单位。物理分辨率是该数值乘以设备像素比，也就是屏幕面板真实的像素网格。一台报告 1440×900、DPR 为 2 的 MacBook，其物理显示为 2880×1800，这正是素材需要达到的尺寸才能做到像素级清晰。触摸支持是如何检测的？通过检查浏览器是否暴露触摸事件（ontouchstart），或 navigator.maxTouchPoints 是否为非零值。在没有触摸屏的台式机上两者均为 false 或 0。部分触控笔记本即使正在使用鼠标也会报告正值，因此应把它理解为能力，而非使用意图。颜色深度和像素深度是什么？颜色深度（位深度）指每个像素的颜色用多少位表示，24 位约可表现 1670 万种颜色。像素深度是与之密切相关的每像素位数，在几乎所有现代硬件上都等于颜色深度，这就是两行数值通常一致的原因。窗口内部尺寸和外部尺寸为什么不同？窗口内部尺寸是内容区域（视口加滚动条）。窗口外部尺寸还包含浏览器边框、工具栏和系统装饰。在窗口模式下外部尺寸总是更大；最大化或全屏演示模式下两者会趋于一致。这个工具能在移动设备上使用吗？可以。在手机和平板上，它会报告视口尺寸、设备像素比（现代手机通常为 2 或 3）、旋转设备时的屏幕方向，以及触摸支持和 1 以上的 maxTouchPoints 数量。有数据被发送到服务器吗？没有。所有数值都在你自己的设备上通过浏览器 API 读取并在本地渲染。不上传、不记录、不存储任何内容，页面加载完成后即使断网也能继续使用。屏幕方向字段显示什么？显示 Screen Orientation API 的类型：竖屏或横屏，主方向或次方向。台式机通常是横屏（主）。如果浏览器不提供该 API，本工具会比较屏幕宽高，直接显示竖屏或横屏。为什么在某些页面上全部复制没有反应？访问剪贴板需要安全上下文。在 https 页面上复制可以正常工作；在普通 http 页面或受限的 iframe 中，浏览器会拒绝复制，此时工具会显示错误提示而不是无声失败。你仍然可以在屏幕上选中数值手动复制。如何用这个工具调试响应式设计？把浏览器调整到目标宽度，然后查看视口一行及其旁边的 CSS 断点，即可确认当前生效的区间。全部复制会生成包含所有数值的纯文本报告，是在缺陷报告中附上精确环境信息的最快方式。