Screen size guide
iPad Screen Size: Pixels, CSS Viewports and DPR
iPad screen size varies across mini, standard, Air, and Pro models. Check native pixels, common 4:3 ratios, CSS viewport behavior, and export notes.
Last checked: 2026-05-03
How we calculate this
Methodology and source handling
We calculate pixel dimensions from the visible size values, aspect ratios, DPI/PPI formulas, and source notes on this page.
Quick answer
Copy-ready answer
Many iPad displays use a 4:3 native shape. Current examples include 2064 x 2752 px for 13-inch iPad Pro in portrait and 1668 x 2420 px for 11-inch Pro or Air class devices.
Dimensions and specs
| Example native pixels | 2,064 x 2,752 px | |
|---|---|---|
| Aspect ratio | 3:4 | |
| Design check | Native pixels, CSS pixels, DPR | |
| Recommended PPI | Use device DPR for web; use native pixels for screenshots |
Formula
How to calculate this size
Export at the recommended pixel canvas before upload or handoff.
Reduce width and height by their greatest common divisor.
Use fit for no crop, fill or center crop for exact coverage, or pad when borders are acceptable.
Export checklist
Before you upload
Use native resolution for screenshots, video frames, and image sharpness checks.
Use CSS pixels for responsive layout breakpoints and browser QA.
Check device pixel ratio, zoom, browser chrome, and OS display scaling before judging layout.
Common mistakes
Avoid these screen-size mistakes
A display can have thousands of hardware pixels while the browser exposes a much smaller CSS viewport.
Retina, HiDPI, browser zoom, and OS scaling change how many physical pixels map to one CSS pixel.
Phone and tablet screenshots, app previews, and responsive layouts can change sharply between portrait and landscape.
Calculator
Check aspect ratio and screen pixels
Use the prefilled target, swap orientation if needed, and copy the reduced ratio before preparing screenshots or previews.
Workflow
How to read screen size
| Term | Use it for |
|---|---|
| Native pixels | Asset sharpness, screenshots, video frames, and hardware comparison. |
| CSS pixels | Responsive layout breakpoints and browser previews. |
| Device pixel ratio | How many physical pixels the browser uses for one CSS pixel. |
| Safe preview | Check real devices or simulators because browser chrome, zoom, and OS scaling change the usable area. |
Specs
iPad screen examples
| Device or class | Native pixels | Notes |
|---|---|---|
| 13-inch iPad Pro class | 2064 x 2752 px portrait | Apple lists 2752-by-2064 resolution at 264 ppi. |
| 11-inch iPad Pro class | 1668 x 2420 px portrait | Apple lists 2420-by-1668 resolution at 264 ppi. |
| 13-inch iPad Air class | 2048 x 2732 px portrait | Apple lists 2732-by-2048 resolution at 264 ppi. |
| iPad mini class | 1488 x 2266 px portrait | Apple lists 2266-by-1488 resolution at 326 ppi. |
Checklist
Preview and export notes
| Check | Action |
|---|---|
| Portrait and landscape | Swap width and height before judging aspect ratio or screenshot crops. |
| Retina or HiDPI | Export images at enough source pixels for the display density. |
| Browser UI | Do not treat full native pixels as the CSS viewport available to a web page. |
Related
Related pages and tools
Same branch
Nearby pages
FAQ
Common questions
Is ipad screen size the same as CSS viewport size?
No. Native pixels describe the display hardware. CSS viewport size depends on browser, zoom, orientation, operating-system scaling, and device pixel ratio.
Which value should designers use?
Use CSS viewport values for layout breakpoints and native pixels for screenshots, exports, and image sharpness checks.
What aspect ratio is the example ipad size?
The example native pixel size on this page reduces to 3:4.
References
Sources and references
Screen-size guidance uses official manufacturer specifications for native pixels and MDN for browser device-pixel-ratio behavior.
-
Apple: compare iPhone models
Official Apple comparison page for current and recent iPhone display sizes and pixel resolutions.
-
Apple: compare iPad models
Official Apple comparison page for iPad display sizes and pixel resolutions.
-
Apple: MacBook Pro tech specs
Official Apple specifications for MacBook Pro native display resolution and pixel density.
-
MDN: Window.devicePixelRatio
Browser reference for the relationship between physical pixels, CSS pixels, and device pixel ratio.
Last checked: 2026-05-03