我的屏幕分辨率是多少？
查看你的屏幕分辨率与窗口尺寸，随缩放实时更新。
这个屏幕分辨率检测工具会以像素显示你的屏幕分辨率、你的浏览器窗口尺寸（视口）、设备像素比、色深以及当前方向。所有数值都会实时更新：把窗口拖小，或旋转一下平板，数字就会在你眼前变化。无论是Bug报告、响应式设计测试，还是一次技术支持沟通，它都是抓取精确数字最快的方式。
这些数字直接来自你的浏览器和设备，用JavaScript读取。不向服务器发送任何内容，也不保存任何数据，因此你看到的读数就是你自己屏幕报告的结果。
这三个数字常被混淆，所以本工具把它们并排展示。屏幕分辨率是你显示器的完整像素尺寸。视口只是你的网页能够绘制的可见区域，它更小，因为浏览器工具栏和任何缩放都会占去空间。设备像素比则是每个CSS像素背后有多少个物理像素——这正是高DPI笔记本或手机显示锐利的原因。
如何查看你的屏幕分辨率
- 打开页面，你的屏幕分辨率和视口尺寸会立刻显示。
- 查看下方的设备像素比、色深和方向。
- 缩放你的浏览器窗口，观察视口数字实时更新。
- 在手机或平板上旋转设备，看方向与尺寸随之变化。
- 复制你在Bug报告或设计测试中需要的数值。
分辨率、视口与设备像素比的区别
假设一台笔记本报告的屏幕分辨率是1920×1080，但视口只有1200×700。这中间的差距，就是浏览器边框、操作系统任务栏和任何页面缩放，它们都在蚕食你的页面真正能用到的空间。当你构建响应式布局时，决定套用哪个断点的是视口，而不是屏幕分辨率。
设备像素比解释了为什么一部标称像素数惊人的手机，布局起来却像一块小得多的屏幕。像素比为2意味着每个CSS像素由2×2的物理像素块绘制，从而在不缩小一切的前提下带来锐利的文字。色深（通常为24位）告诉你显示器能显示多少种颜色，而方向则会在你旋转设备时于竖屏和横屏之间切换。
页面上每个数值的含义
屏幕分辨率以「宽×高」的CSS像素表示，反映你整块显示器的尺寸。视口则是当前窗口内，你的网页内容实际可用的宽度和高度。设备像素比是CSS像素与物理像素之间的换算倍数。色深是每个像素用于表示颜色所用的位数，方向则说明当前是较短的边还是较长的边处于水平方向。
把这些数值放在一起看，它们既描述了你的显示器所能提供的整块画布，也描述了此刻网页被分配到的那一小块区域。这正是本工具的意义所在：人们通常把「屏幕分辨率」挂在嘴边，但真正决定网站在他们眼中长什么样的数字其实是视口，把两者并排显示，就能一眼避免这个最常见的误解。
CSS像素与你面板的原生分辨率
这是大多数检测工具都会回避的一点实话：浏览器报告的数值是CSS像素，这是一种软件层面的抽象，未必对应你屏幕面板真实的物理像素网格。在高DPI显示器上，浏览器会刻意报告一个更小的「逻辑」分辨率，并搭配一个大于1的设备像素比，因此一台面板物理分辨率为2560×1600的笔记本，可能会以像素比2报告成1280×800。把报告出的尺寸乘以像素比，就能估算出物理像素网格。
操作系统的显示缩放又叠加了一层。如果你把Windows或macOS的界面设置为缩放显示，浏览器报告的CSS分辨率反映的是这个缩放后的设置，而不是面板的真实上限。因此这里给出的数字回答的是「浏览器看到了什么」，这才是网页布局真正关心的问题，它完全可能与显示器规格表上印着的原生分辨率不同。
这些数字什么时候有用
对于响应式Web开发，本工具是一个快速的现实检查器。你可以拖动窗口，精确看到CSS断点在哪里被触发，确认某条媒体查询是否在你预期的视口宽度上生效，并抓取布局开始崩坏时的精确尺寸。在真实浏览器里这样操作，能捕捉到固定的模拟器预设可能会漏掉的问题。
它在技术支持和Bug报告场景中同样很有价值。一个只在特定窗口尺寸或像素比下才出现的视觉故障，如果报告者附上自己的视口、分辨率和设备像素比，就会容易复现得多。用户不必再用文字描述自己的屏幕，而是可以直接复制精确数字，让开发者立刻匹配出同样的环境。
解读像素比与断点
一个常见的误区，是以为标称像素数很大的设备就需要桌面版布局。通常并非如此：一部手机可能拥有数以百万计的物理像素，但呈现出的视口却只有几百个CSS像素宽，因为高像素比被用在了清晰度上，而不是额外的布局空间上。请始终针对视口宽度来设计，把像素比单独留给图像清晰度去处理。
这也决定了你该如何提供图片。在设备像素比为2或3的显示器上，标准分辨率的图片会显得模糊，这正是响应式图片要为高DPI屏幕提供更高分辨率版本的原因。在这里读到自己的像素比，能让这个概念变得具体：它正是网站用来判断是否该给你发送更清晰素材的那个精确倍数。
局限性与准确度
由于浏览器暴露的是经过操作系统缩放和页面缩放影响的CSS像素，报告出的分辨率并非对你面板硬件的直接读取。页面缩放尤其会改变视口数字，因此如果数字看起来不对劲，先检查一下你的缩放比例是否为100%。这些都不是错误，只是浏览器如实报告了它用于页面布局的坐标系统。
在部分浏览器中，出于隐私考虑，数值也可能被四舍五入或做了限制，而多显示器环境下，报告的是窗口当前所在的那块显示器，而非整个桌面。请把这份读数当作对浏览器当前视图的准确描述——这正是网页会据此响应的东西——而不是对你显示器的权威硬件规格说明。
相关的浏览器工具
User Agent检测工具是这里显而易见的搭档，因为一段浏览器字符串，加上你的屏幕和视口尺寸，共同描述了一个网站据以适配的环境。当布局出现异常时，同时提供这两项信息，是让开发者最快复现你所看到画面的办法，而且这两个工具都纯粹读取自浏览器，不会向外发送任何内容。
如果显示或加载问题最终归结为网络连接而非屏幕本身，「我的IP是什么」、IP地址查询和DNS查询工具能覆盖网络这一侧。手边备齐这一整套工具，你就能迅速判断问题究竟出在浏览器、设备，还是通往某个网站的网络路径上。
常见问题
这个屏幕分辨率工具免费吗？
免费，无需注册，也没有次数限制。你什么时候需要这些数字，就什么时候打开它。
为什么我的视口比屏幕分辨率小？
视口只是你的网页能够绘制的区域。浏览器工具栏、操作系统任务栏和页面缩放都会让它变小，因此它通常小于完整的屏幕分辨率。
什么是设备像素比？
它是每个CSS像素背后有多少个物理像素。在现代手机和高DPI笔记本上常见的2或3的像素比，正是让文字和图像看起来锐利的原因。
缩放窗口时数字会更新吗？
会。视口尺寸、方向及相关数值会随你拖动窗口或旋转设备而实时更新，因此你可以实时观察断点的变化。
这些信息会被发送到什么地方吗？
不会。每一项数值都用JavaScript在本地读取自你的浏览器和设备。不上传、不保存，因此在任何地方使用都安全。
在手机和平板上能用吗？
能。它在任何现代手机浏览器里都能运行，而且在那里确实好用——你可以旋转设备，看着分辨率、视口和方向随之变化。