Free tool What is my screen resolution? CSS pixels, physical pixels and viewport
Your screen has two resolutions: the physical pixels on the panel and the CSS pixels that websites and analytics tools see. This page shows both, the pixel ratio between them and the size of the window you are browsing in, then lists the official resolutions of current phones, tablets and Macs.
- Updates as you resize
- Official device specs
- Nothing sent anywhere
Your screen resolution right now
Read by JavaScript in your browser. Resize the window, rotate your phone or drag the window to another monitor and the numbers follow.
Screen resolution (CSS pixels)
—
Physical pixels (estimated)
—
Device pixel ratio
—
Browser viewport
—
Available screen area
—
Page width without scrollbar
—
Orientation
—
Aspect ratio
—
Colour depth
—
TapCub screen range
—
Standard name
—
Checking the device table…
Your screen details appear here once JavaScript runs.Physical pixels = CSS pixels × device pixel ratio. On a Mac set to a scaled "More Space" or "Larger Text" mode, this is the size macOS renders at, which can differ from the panel's native resolution in the table below.
Display features
What CSS media queries report about this screen. Designers use them for dark mode, high-DPI images and touch layouts.
Resolution media queryresolution in dots per CSS pixel | — |
|---|---|
Colour gamutcolor-gamut: widest range the screen covers | — |
HDRdynamic-range: high | — |
Colour schemeprefers-color-scheme | — |
Motion preferenceprefers-reduced-motion | — |
Primary pointerpointer: mouse is fine, finger is coarse | — |
Can hoverhover | — |
Touch pointsnavigator.maxTouchPoints | — |
More than one screenscreen.isExtended, Chromium only | — |
Common device screen resolutions
Native resolution, size and pixel density as published by each manufacturer. The viewport column is the CSS size a page sees in portrait, from Apple's published point sizes. Your device is highlighted when the numbers match.
| Device | Size | Resolution (px) | PPI | Viewport (CSS px) | Source |
|---|---|---|---|---|---|
| iPhone 18 ProPhone · 2026Matches your screen | 6.3″ | 1,206 × 2,622 | 460 | — | Spec page |
| iPhone 18 Pro MaxPhone · 2026Matches your screen | 6.9″ | 1,320 × 2,868 | 460 | — | Spec page |
| iPhone 17ePhone · 2026Matches your screen | 6.1″ | 1,170 × 2,532 | 460 | — | Spec page |
| iPhone 17Phone · 2025Matches your screen | 6.3″ | 1,206 × 2,622 | 460 | 402 × 874 @3x | Spec page |
| iPhone AirPhone · 2025Matches your screen | 6.5″ | 1,260 × 2,736 | 460 | 420 × 912 @3x | Spec page |
| iPhone 17 ProPhone · 2025Matches your screen | 6.3″ | 1,206 × 2,622 | 460 | 402 × 874 @3x | Spec page |
| iPhone 17 Pro MaxPhone · 2025Matches your screen | 6.9″ | 1,320 × 2,868 | 460 | 440 × 956 @3x | Spec page |
| iPhone 16ePhone · 2025Matches your screen | 6.1″ | 1,170 × 2,532 | 460 | 390 × 844 @3x | Spec page |
| iPhone 16Phone · 2024Matches your screen | 6.1″ | 1,179 × 2,556 | 460 | 393 × 852 @3x | Spec page |
| iPhone 16 PlusPhone · 2024Matches your screen | 6.7″ | 1,290 × 2,796 | 460 | 430 × 932 @3x | Spec page |
| iPhone 15Phone · 2023Matches your screen | 6.1″ | 1,179 × 2,556 | 460 | 393 × 852 @3x | Spec page |
| iPhone SE (3rd gen)Phone · 2022Matches your screen | 4.7″ | 750 × 1,334 | 326 | 375 × 667 @2x | Spec page |
| Galaxy S26PhoneMatches your screen | 6.3″ | 1,080 × 2,340 | — | — | Spec page |
| Galaxy S26+PhoneMatches your screen | 6.7″ | 1,440 × 3,120 | — | — | Spec page |
| Galaxy S26 UltraPhoneMatches your screen | 6.9″ | 1,440 × 3,120 | — | — | Spec page |
| Galaxy A57 5GPhoneMatches your screen | 6.7″ | 1,080 × 2,340 | — | — | Spec page |
| Pixel 11Phone · 2026Matches your screen | 6.3″ | 1,080 × 2,424 | 422 | — | Spec page |
| Pixel 11 ProPhone · 2026Matches your screen | 6.3″ | 1,280 × 2,856 | 495 | — | Spec page |
| Pixel 11 Pro XLPhone · 2026Matches your screen | 6.8″ | 1,344 × 2,992 | 486 | — | Spec page |
| Pixel 10Phone · 2025Matches your screen | 6.3″ | 1,080 × 2,424 | 422 | — | Spec page |
| Pixel 10aPhone · 2026Matches your screen | 6.3″ | 1,080 × 2,424 | 422 | — | Spec page |
| HUAWEI Mate 80PhoneMatches your screen | 6.75″ | 1,280 × 2,832 | — | — | Spec page |
| HUAWEI Mate 70PhoneMatches your screen | 6.7″ | 1,216 × 2,688 | — | — | Spec page |
| HUAWEI Pura 90PhoneMatches your screen | 6.8″ | 1,320 × 2,856 | 460 | — | Spec page |
| HUAWEI Pura 80 ProPhoneMatches your screen | 6.8″ | 1,276 × 2,848 | 460 | — | Spec page |
| Xiaomi 17PhoneMatches your screen | 6.3″ | 1,220 × 2,656 | 460 | — | Spec page |
| Xiaomi 15PhoneMatches your screen | 6.36″ | 1,200 × 2,670 | 460 | — | Spec page |
| iPad (A16)Tablet · 2025Matches your screen | 11″ | 1,640 × 2,360 | 264 | 820 × 1180 @2x | Spec page |
| iPad Air 11" (M4)Tablet · 2026Matches your screen | 11″ | 1,640 × 2,360 | 264 | 820 × 1180 @2x | Spec page |
| iPad Air 13" (M4)Tablet · 2026Matches your screen | 13″ | 2,048 × 2,732 | 264 | 1024 × 1366 @2x | Spec page |
| iPad Pro 11" (M5)Tablet · 2025Matches your screen | 11″ | 1,668 × 2,420 | 264 | 834 × 1210 @2x | Spec page |
| iPad Pro 13" (M5)Tablet · 2025Matches your screen | 13″ | 2,064 × 2,752 | 264 | 1032 × 1376 @2x | Spec page |
| iPad mini (A20 Pro)Tablet · 2026Matches your screen | 8.5″ | 1,512 × 2,316 | 326 | — | Spec page |
| MacBook Air 13" (M5)Laptop · 2026Matches your screen | 13.6″ | 2,560 × 1,664 | 224 | — | Spec page |
| MacBook Air 15" (M5)Laptop · 2026Matches your screen | 15.3″ | 2,880 × 1,864 | 224 | — | Spec page |
| MacBook NeoLaptop · 2026Matches your screen | 13″ | 2,408 × 1,506 | 219 | — | Spec page |
| MacBook Pro 14" (Liquid Retina XDR)Laptop · 2026Matches your screen | 14.2″ | 3,024 × 1,964 | 254 | — | Spec page |
| MacBook Pro 16" (Liquid Retina XDR)Laptop · 2026Matches your screen | 16.2″ | 3,456 × 2,234 | 254 | — | Spec page |
| iMac 24"Desktop · 2026Matches your screen | 24″ | 4,480 × 2,520 | 218 | — | Spec page |
No device matches that search.
Checked against manufacturer spec pages on 2026-11-10. Resolutions are shown portrait for phones and tablets and landscape for computers. Apple point sizes come from the device table in the Human Interface Guidelines, which Apple removed in September 2026 (Apple's copy archived 2026-07-02); models launched after that show "—". Android makers do not publish a default CSS width: it changes with the display size setting.
Version v1.0Updated Update history
Which number is "my resolution"?
Three numbers describe the same screen. Each one answers a different question.
Screen resolution (CSS pixels)
What screen.width and screen.height return, and what websites, CSS breakpoints and analytics reports use. On an iPhone 16 it is 393 × 852 even though the panel has 1179 × 2556 pixels.
Physical pixels
The dots on the panel, the number printed on the box. The browser does not expose it directly; multiplying CSS pixels by the pixel ratio gets you there on phones and Windows, but not always on Macs set to a scaled mode.
Device pixel ratio
How many physical pixels make up one CSS pixel: 1 on a classic monitor, 2 on most Macs and iPads, 3 on recent iPhones, values like 1.25 or 1.5 on Windows with display scaling. It decides which image size looks sharp.
Viewport
The part of the browser window the page can use. This is what responsive layouts react to, and it is smaller than the screen: toolbars, the dock or taskbar and a non-maximised window all take space.
For layout decisions, design for viewport widths, not screen sizes. For image assets, design for the pixel ratio: a 400-pixel-wide slot on a 3× phone needs a 1,200-pixel image to look sharp.
Three common reasons to check
No input needed: the page reads your screen as soon as it loads.
-
1
Report a layout bug
Copy the summary block and paste it into the ticket. Viewport and pixel ratio are what developers need to reproduce the issue, more than the model name.
-
2
Pick image and breakpoint sizes
Look up the target devices in the table: the viewport column gives the CSS width your breakpoints must handle, the resolution column the largest image worth serving.
-
3
Check a new monitor or scaling setting
Compare the physical pixels with the monitor's spec sheet. If they differ, Windows display scaling or a non-native resolution is in play.
CSS pixels, physical pixels and the APIs behind them
A CSS pixel is a unit of length, not a dot: the CSS specification defines it as 1/96 of an inch, adjusted so text looks about the same size on any device. The pixel ratio translates it into hardware pixels.
- Physical width =
screen.width × devicePixelRatio - Analytics tools, including TapCub, record the CSS size, so "1920 × 1080" in a report can be a 4K monitor at 200% scaling
- Browser zoom changes the pixel ratio and the viewport; reset it before reading values
| Value | Browser API | Notes |
|---|---|---|
| Screen resolution | screen.width, screen.height | CSS pixels of the whole display |
| Available area | screen.availWidth, availHeight | Minus taskbar, dock or menu bar |
| Viewport | innerWidth, innerHeight | Includes the scrollbar |
| Page width | documentElement.clientWidth | Excludes the scrollbar; what CSS 100% means |
| Pixel ratio | devicePixelRatio | Changes with browser zoom |
| Orientation | screen.orientation.type | Falls back to width vs height |
| Colour depth | screen.colorDepth | Usually 24 bits; 30 on some HDR setups |
One resolution in the report, three different screens
All three devices below report the same 1920 × 1080 CSS screen size to a website.
| Device setup | Physical pixels | Pixel ratio | screen.width × height |
|---|---|---|---|
| 24-inch Full HD monitor, 100% scaling | 1920 × 1080 | 1 | 1920 × 1080 |
| 27-inch 4K monitor, Windows 200% scaling | 3840 × 2160 | 2 | 1920 × 1080 |
| Laptop with 2400 × 1350 panel at 125% | 2400 × 1350 | 1.25 | 1920 × 1080 |
The reverse also happens: one physical panel reports different CSS sizes depending on the scaling setting. That is why a screen report groups visitors by CSS width range rather than by model.
Misreadings to avoid
Resolution numbers are easy to compare and easy to compare wrongly.
Designing for screen size instead of viewport
A 1440-wide screen with a half-width window gives the page about 720 pixels. Breakpoints react to the viewport.
Reading a zoomed page
At 110% browser zoom every value shifts. An odd pixel ratio such as 1.1 or 2.2 is the giveaway.
Using the box resolution as a CSS width
A phone sold as 1080 × 2424 does not lay out pages at 1080 pixels wide; at a ratio around 2.6 it is about 412.
Treating a report row as a device model
Analytics resolution reports are CSS sizes. 390 × 844 is several iPhone models, and Android sizes vary with user settings.
Screen sizes in your audience report
TapCub's script reads the same screen.width × screen.height this page shows, and nothing more about the display.
Screens card on the audience page
Visitors are grouped into nine CSS width ranges, from under 375 to 2560 and up. Click a range to filter every other report by it.
Learn moreExact size on the visitor
A visitor's details show the exact screen size for the session, next to device, browser and OS.
Learn morePart of bot detection
Screen size is one of the signals that separates people from automated browsers, which often run with tiny or default windows.
Learn moreScreen resolution questions
Still have a question?
Chat with the team behind TapCub — we usually reply within a few hours on business days.
What is my screen resolution?
The large numbers at the top of this page. The first is the CSS resolution websites see; the second is the physical pixel count, estimated as CSS pixels times the device pixel ratio.
Why is my screen resolution lower than advertised?
Because the browser reports CSS pixels. A 2556 × 1179 iPhone panel at 3× is 852 × 393 CSS pixels, and a 4K monitor at 150% Windows scaling reports 2560 × 1440. The hardware still uses every pixel for sharper text and images.
How do I check screen resolution on Windows or Mac?
On Windows: Settings → System → Display → Display resolution, with Scale just above it. On a Mac: System Settings → Displays, where the options are labelled by the size the screen will look like. This page shows both views at once.
What is a good screen resolution for a website design?
There is no single answer. Design fluid layouts and test at common viewport widths: about 360–430 for phones, 768–1024 for tablets and 1280 and up for laptops. Your own analytics screen report tells you which ranges your visitors actually use.
What is device pixel ratio?
The number of physical pixels per CSS pixel. 2 means each CSS pixel is drawn with a 2 × 2 block of hardware pixels. Serve images at width × ratio to keep them sharp.
Why does the table show no viewport for Android phones?
Samsung, Google, Huawei and Xiaomi publish the panel resolution but not a default CSS width, and the width changes with the display size setting. We only list numbers manufacturers publish.
Does this page send my screen size anywhere?
No. Everything is read and shown by JavaScript in your browser; nothing on this page is uploaded or stored.
Update history
New features, fixes and data refreshes for this tool, newest first.
-
· v1.0
LaunchedFirst release.
Data this tool relies on
- Device screen specs from manufacturers — checked 2026-11-10, reviewed every 12 months (next review by 2027-11-10)
Missing something or found an error? Tell us — requests that come up often go into the next update. All tool updates
See which screens your visitors actually use
Add TapCub's script and the audience report shows screen ranges, devices, browsers and languages, with bots kept out.