屏幕信息
免费在线屏幕信息工具。实时查看显示器分辨率、DPI、宽高比和色彩深度。浏览器处理，无需安装。
lock文件不会上传到服务器
按 Ctrl+D 收藏此页面
屏幕信息工具是一款免费在线工具，显示设备的屏幕分辨率、视口大小、DPR和色深。 对响应式设计开发和调试有用，实时检测窗口大小变化。 在浏览器中处理，完全免费。 屏幕信息可在学习、工作和日常的各种场合中轻松使用。 无需安装或登录，在电脑和手机的浏览器中即可直接使用。 所有处理均在您的设备本地完成，使用更加安心。
如何使用屏幕信息?
- 打开页面自动显示设备的屏幕信息。
- 调整浏览器窗口大小可实时更新。
- 复制所需信息使用。
屏幕信息常见问题
什么是DPR（设备像素比）？
DPR是每个CSS像素对应的物理像素数。DPR为2表示Retina显示屏，图片需要准备2倍大小才能清晰显示。
屏幕分辨率和视口大小有什么区别？
屏幕分辨率是显示器的总物理像素数，而视口是浏览器中显示内容的区域，不包括工具栏和滚动条。
响应式设计的断点该定在哪些数值？
按具体机型名称去定断点，等新机器一出就必然失效。应该在版面本身开始变得别扭的地方切分。实务上 480px、768px、1024px、1280px 是常见的起点，但那只是好记的数字，不是规则。把浏览器窗口慢慢往窄里拖，看行文变得过长或卡片被挤扁的宽度出现在哪里，把断点放在那儿要牢靠得多。
我用的是 4K 显示器，为什么 CSS 里显示 1920px？
因为 CSS 像素是表示视觉尺寸的单位，而不是物理像素点。4K 屏幕在 200% 缩放下，3840 个物理像素会以 1920 个 CSS 像素呈现，这正是文字和图标显得更密、更锐利的原因。此时设备像素比为 2，所以要让图片保持清晰，需要通过 srcset 额外提供两倍显示尺寸的文件。
如何充分利用屏幕信息?
- CSS 像素不等于物理像素：DPR 为 2 时需要准备两倍尺寸的图片才不模糊。
- 桌面端仍以 1920×1080 最常见，手机则集中在 390-430px 的视口宽度。
- 断点要按浏览器窗口宽度测试，而不是屏幕分辨率，两者常常不一致。