免费工具 屏幕分辨率检测：我的屏幕到底是多少像素？
一块屏幕有两个分辨率：面板上的物理像素，和网页、统计工具看到的 CSS 像素。这一页同时显示两者、它们之间的设备像素比，以及你当前浏览器窗口的大小，下面再列出常见手机、平板和 Mac 的官方分辨率。
- 缩放窗口实时更新
- 设备表来自厂商官网
- 只在本机读取
你现在的屏幕分辨率
由本页的脚本在你的浏览器里读取。缩放窗口、旋转手机、把窗口拖到另一块显示器，数字都会跟着变。
屏幕分辨率（CSS 像素）
—
物理像素（估算）
—
设备像素比（DPR）
—
浏览器视口
—
屏幕可用区域
—
页面宽度（不含滚动条）
—
方向
—
宽高比
—
色深
—
TapCub 屏幕区间
—
标准叫法
—
正在对照设备表…
脚本运行后，这里会显示你的屏幕信息。物理像素 = CSS 像素 × 设备像素比。Mac 如果在「显示器」设置里选了更大空间或更大字体的缩放档，这里得到的是 macOS 实际渲染的尺寸，可能和下表里面板的原生分辨率不同。
显示特性
CSS 媒体查询读到的这块屏幕的特性。做深色模式、高清图、触屏布局时会用到。
分辨率媒体查询resolution，单位是每 CSS 像素的点数 | — |
|---|---|
色域color-gamut：屏幕能覆盖的最大色域 | — |
HDRdynamic-range: high | — |
深浅色prefers-color-scheme | — |
减少动画prefers-reduced-motion | — |
主要指点设备pointer：鼠标为精确，手指为粗略 | — |
能否悬停hover | — |
触控点数navigator.maxTouchPoints | — |
是否多屏screen.isExtended，仅 Chromium 内核 | — |
常见设备屏幕分辨率
原生分辨率、尺寸和像素密度都照抄各厂商官网的规格页。「视口」一列是竖屏时网页看到的 CSS 尺寸，来自 Apple 公布的逻辑点尺寸。数字和你的设备一致时会高亮。
| 设备 | 尺寸 | 分辨率（像素） | PPI | 视口（CSS 像素） | 来源 |
|---|---|---|---|---|---|
| iPhone 18 Pro手机 · 2026和你的屏幕一致 | 6.3″ | 1,206 × 2,622 | 460 | — | 官网规格 |
| iPhone 18 Pro Max手机 · 2026和你的屏幕一致 | 6.9″ | 1,320 × 2,868 | 460 | — | 官网规格 |
| iPhone 17e手机 · 2026和你的屏幕一致 | 6.1″ | 1,170 × 2,532 | 460 | — | 官网规格 |
| iPhone 17手机 · 2025和你的屏幕一致 | 6.3″ | 1,206 × 2,622 | 460 | 402 × 874 @3x | 官网规格 |
| iPhone Air手机 · 2025和你的屏幕一致 | 6.5″ | 1,260 × 2,736 | 460 | 420 × 912 @3x | 官网规格 |
| iPhone 17 Pro手机 · 2025和你的屏幕一致 | 6.3″ | 1,206 × 2,622 | 460 | 402 × 874 @3x | 官网规格 |
| iPhone 17 Pro Max手机 · 2025和你的屏幕一致 | 6.9″ | 1,320 × 2,868 | 460 | 440 × 956 @3x | 官网规格 |
| iPhone 16e手机 · 2025和你的屏幕一致 | 6.1″ | 1,170 × 2,532 | 460 | 390 × 844 @3x | 官网规格 |
| iPhone 16手机 · 2024和你的屏幕一致 | 6.1″ | 1,179 × 2,556 | 460 | 393 × 852 @3x | 官网规格 |
| iPhone 16 Plus手机 · 2024和你的屏幕一致 | 6.7″ | 1,290 × 2,796 | 460 | 430 × 932 @3x | 官网规格 |
| iPhone 15手机 · 2023和你的屏幕一致 | 6.1″ | 1,179 × 2,556 | 460 | 393 × 852 @3x | 官网规格 |
| iPhone SE (3rd gen)手机 · 2022和你的屏幕一致 | 4.7″ | 750 × 1,334 | 326 | 375 × 667 @2x | 官网规格 |
| Galaxy S26手机和你的屏幕一致 | 6.3″ | 1,080 × 2,340 | — | — | 官网规格 |
| Galaxy S26+手机和你的屏幕一致 | 6.7″ | 1,440 × 3,120 | — | — | 官网规格 |
| Galaxy S26 Ultra手机和你的屏幕一致 | 6.9″ | 1,440 × 3,120 | — | — | 官网规格 |
| Galaxy A57 5G手机和你的屏幕一致 | 6.7″ | 1,080 × 2,340 | — | — | 官网规格 |
| Pixel 11手机 · 2026和你的屏幕一致 | 6.3″ | 1,080 × 2,424 | 422 | — | 官网规格 |
| Pixel 11 Pro手机 · 2026和你的屏幕一致 | 6.3″ | 1,280 × 2,856 | 495 | — | 官网规格 |
| Pixel 11 Pro XL手机 · 2026和你的屏幕一致 | 6.8″ | 1,344 × 2,992 | 486 | — | 官网规格 |
| Pixel 10手机 · 2025和你的屏幕一致 | 6.3″ | 1,080 × 2,424 | 422 | — | 官网规格 |
| Pixel 10a手机 · 2026和你的屏幕一致 | 6.3″ | 1,080 × 2,424 | 422 | — | 官网规格 |
| HUAWEI Mate 80手机和你的屏幕一致 | 6.75″ | 1,280 × 2,832 | — | — | 官网规格 |
| HUAWEI Mate 70手机和你的屏幕一致 | 6.7″ | 1,216 × 2,688 | — | — | 官网规格 |
| HUAWEI Pura 90手机和你的屏幕一致 | 6.8″ | 1,320 × 2,856 | 460 | — | 官网规格 |
| HUAWEI Pura 80 Pro手机和你的屏幕一致 | 6.8″ | 1,276 × 2,848 | 460 | — | 官网规格 |
| Xiaomi 17手机和你的屏幕一致 | 6.3″ | 1,220 × 2,656 | 460 | — | 官网规格 |
| Xiaomi 15手机和你的屏幕一致 | 6.36″ | 1,200 × 2,670 | 460 | — | 官网规格 |
| iPad (A16)平板 · 2025和你的屏幕一致 | 11″ | 1,640 × 2,360 | 264 | 820 × 1180 @2x | 官网规格 |
| iPad Air 11" (M4)平板 · 2026和你的屏幕一致 | 11″ | 1,640 × 2,360 | 264 | 820 × 1180 @2x | 官网规格 |
| iPad Air 13" (M4)平板 · 2026和你的屏幕一致 | 13″ | 2,048 × 2,732 | 264 | 1024 × 1366 @2x | 官网规格 |
| iPad Pro 11" (M5)平板 · 2025和你的屏幕一致 | 11″ | 1,668 × 2,420 | 264 | 834 × 1210 @2x | 官网规格 |
| iPad Pro 13" (M5)平板 · 2025和你的屏幕一致 | 13″ | 2,064 × 2,752 | 264 | 1032 × 1376 @2x | 官网规格 |
| iPad mini (A20 Pro)平板 · 2026和你的屏幕一致 | 8.5″ | 1,512 × 2,316 | 326 | — | 官网规格 |
| MacBook Air 13" (M5)笔记本 · 2026和你的屏幕一致 | 13.6″ | 2,560 × 1,664 | 224 | — | 官网规格 |
| MacBook Air 15" (M5)笔记本 · 2026和你的屏幕一致 | 15.3″ | 2,880 × 1,864 | 224 | — | 官网规格 |
| MacBook Neo笔记本 · 2026和你的屏幕一致 | 13″ | 2,408 × 1,506 | 219 | — | 官网规格 |
| MacBook Pro 14" (Liquid Retina XDR)笔记本 · 2026和你的屏幕一致 | 14.2″ | 3,024 × 1,964 | 254 | — | 官网规格 |
| MacBook Pro 16" (Liquid Retina XDR)笔记本 · 2026和你的屏幕一致 | 16.2″ | 3,456 × 2,234 | 254 | — | 官网规格 |
| iMac 24"台式机 · 2026和你的屏幕一致 | 24″ | 4,480 × 2,520 | 218 | — | 官网规格 |
没有符合搜索的设备。
2026-11-10 按厂商规格页核对。手机和平板按竖屏写，电脑按横屏写。Apple 的逻辑点尺寸来自 人机界面指南（HIG）的设备尺寸表，Apple 在 2026 年 9 月删掉了这张表（Apple 原文 2026-07-02 的存档），之后发布的机型写「—」。安卓厂商不公布默认 CSS 宽度，它会随「显示大小 / 字体与显示」设置变化。
版本 v1.0更新于 更新记录
哪个数字才是「我的分辨率」？
同一块屏幕有三个数字，各自回答不同的问题。
屏幕分辨率（CSS 像素）
screen.width 和 screen.height 的值，也是网页、CSS 断点和统计报表用的数字。iPhone 16 面板是 1179 × 2556 像素，网页看到的却是 393 × 852。
物理像素
面板上实际的点数，也就是包装盒上写的分辨率。浏览器不直接给这个值；手机和 Windows 上用 CSS 像素乘设备像素比就能得到，Mac 选了缩放档时不一定等于面板原生分辨率。
设备像素比（DPR）
一个 CSS 像素由几个物理像素组成：普通显示器是 1，大多数 Mac 和 iPad 是 2，近几年的 iPhone 是 3，Windows 开了缩放会是 1.25、1.5 这类值。它决定多大的图片看起来才清楚。
视口
浏览器窗口里网页能用的区域，响应式布局按它变化。它比屏幕小：工具栏、Dock 或任务栏、没最大化的窗口都会占掉一部分。
做布局看视口宽度，不看屏幕分辨率；做切图看设备像素比：3 倍屏手机上 400 像素宽的位置，要 1200 像素宽的图才清晰。
常见的三种用法
不用输入，打开页面就会读取。
-
1
反馈页面错位
点复制，把摘要贴进工单或发给前端。复现问题时，视口和设备像素比比机型名字更有用。
-
2
定切图尺寸和断点
在设备表里找目标机型：「视口」一列是断点要照顾的 CSS 宽度，「分辨率」一列是值得提供的最大图片尺寸。
-
3
检查新显示器或缩放设置
把物理像素和显示器规格对一下。对不上，多半是 Windows 显示缩放或没用原生分辨率。
CSS 像素、物理像素和背后的浏览器接口
CSS 像素是长度单位，不是一个点：CSS 规范把它定义为 1/96 英寸，并按观看距离调整，让文字在不同设备上看起来差不多大。设备像素比负责把它换算成硬件像素。
- 物理宽度 =
screen.width × devicePixelRatio - 统计工具（包括 TapCub）记录的是 CSS 尺寸，报表里的「1920 × 1080」可能是一台开了 200% 缩放的 4K 显示器
- 浏览器缩放会改变设备像素比和视口，读数前先恢复 100%
| 数值 | 浏览器接口 | 说明 |
|---|---|---|
| 屏幕分辨率 | screen.width、screen.height | 整块屏幕的 CSS 像素 |
| 可用区域 | screen.availWidth、availHeight | 扣掉任务栏、Dock、菜单栏 |
| 视口 | innerWidth、innerHeight | 包含滚动条 |
| 页面宽度 | documentElement.clientWidth | 不含滚动条，也就是 CSS 里 100% 的宽度 |
| 设备像素比 | devicePixelRatio | 随浏览器缩放变化 |
| 方向 | screen.orientation.type | 不支持时按宽高判断 |
| 色深 | screen.colorDepth | 一般是 24 位，部分 HDR 环境是 30 位 |
报表里同一个分辨率，背后是三种屏幕
下面三台设备报给网站的 CSS 屏幕尺寸都是 1920 × 1080。
| 设备和设置 | 物理像素 | 设备像素比 | screen.width × height |
|---|---|---|---|
| 24 英寸 1080P 显示器，缩放 100% | 1920 × 1080 | 1 | 1920 × 1080 |
| 27 英寸 4K 显示器，Windows 缩放 200% | 3840 × 2160 | 2 | 1920 × 1080 |
| 2400 × 1350 面板的笔记本，缩放 125% | 2400 × 1350 | 1.25 | 1920 × 1080 |
反过来也一样：同一块面板换个缩放设置，报给网站的 CSS 尺寸就不同。所以统计报表按 CSS 宽度区间给访客分组，而不是按机型。
容易看错的地方
分辨率的数字好比较，也容易比错。
按屏幕分辨率做布局
1440 宽的屏幕，窗口只开一半，网页只有 720 像素左右可用。断点跟着视口走。
在缩放过的页面上读数
浏览器缩放到 110% 时所有数字都会变。设备像素比出现 1.1、2.2 这类怪值就是信号。
把包装盒上的分辨率当 CSS 宽度
标称 1080 × 2424 的手机，网页并不是按 1080 宽排版；设备像素比 2.6 左右时大约是 412。
把报表里的一行当成一款机型
统计报表的分辨率是 CSS 尺寸。390 × 844 对应好几款 iPhone，安卓的尺寸还会随用户设置变化。
受众报表里的屏幕尺寸
TapCub 的统计脚本读的就是本页显示的 screen.width × screen.height，关于屏幕不读别的。
怎么查看自己的屏幕分辨率？
打开本页就行，顶部的大数字就是。第一个是网页看到的 CSS 分辨率，第二个是物理像素（CSS 像素乘设备像素比估算）。也可以在系统设置里看：Windows 在「设置 → 系统 → 屏幕 → 显示器分辨率」，上面一项就是缩放；Mac 在「系统设置 → 显示器」。
为什么检测出来的分辨率比手机参数低？
浏览器报的是 CSS 像素。iPhone 16 的 2556 × 1179 面板按 3 倍换算是 852 × 393；4K 显示器开 150% 缩放报的是 2560 × 1440。硬件仍然用全部像素显示，所以文字和图片更清楚。
如何检测手机屏幕分辨率？
在手机浏览器里打开本页，顶上直接显示 CSS 像素、物理像素和设备像素比。注意安卓手机的 CSS 宽度会随「显示大小」或「字体与显示大小」设置变化，同一台手机调过设置后读数不同。
网页设计按什么分辨率做？
没有统一答案。做自适应布局，在常见视口宽度下测试：手机约 360–430，平板 768–1024，笔记本 1280 以上。你自己网站的统计报表能告诉你访客实际用哪些区间。
设备像素比是什么？
一个 CSS 像素对应几个物理像素。2 表示一个 CSS 像素用 2 × 2 个硬件像素来画。图片按「显示宽度 × 设备像素比」准备，才不会糊。
为什么安卓手机没有「视口」数据？
三星、Google、华为、小米只公布面板分辨率，不公布默认 CSS 宽度，而且它随显示大小设置变化。表里只放厂商公布过的数字。
这个页面会上传我的屏幕信息吗？
不会。所有数字都由你浏览器里的脚本读取和显示，不上传、不保存。