iPad Viewport Sizes from iPad Mini to iPad Pro 13"
Complete iPad CSS viewport size reference covering iPad Mini, iPad Air, and iPad Pro models. Includes dimensions for portrait and landscape orientations.
Detailed Explanation
iPad Viewport Sizes Reference
iPads occupy the tablet segment and have viewport widths ranging from 744px (iPad Mini) to 1032px (iPad Pro 13"). Understanding these dimensions is important because iPads are widely used in enterprise, education, and creative workflows.
iPad Model Comparison
| Model | CSS Width (Portrait) | CSS Height (Portrait) | DPR |
|---|---|---|---|
| iPad Mini (6th gen) | 744px | 1133px | 2x |
| iPad (10th gen) | 820px | 1180px | 2x |
| iPad Air (5th gen) | 820px | 1180px | 2x |
| iPad Pro 11" | 834px | 1194px | 2x |
| iPad Pro 12.9" | 1024px | 1366px | 2x |
| iPad Pro 13" (M4) | 1032px | 1376px | 2x |
Split View and Slide Over
On iPads, users frequently use Split View (two apps side by side) and Slide Over (floating app panel). In Split View, each app gets roughly half the screen width, meaning your web app might be displayed at around 400-500px wide even on a large iPad Pro. Design your layouts to handle these narrower widths gracefully.
The 768px Breakpoint
The classic 768px breakpoint originated from the original iPad's portrait width. While newer iPads are wider (820px+), 768px remains relevant because it is used by Bootstrap, Tailwind, and Material UI as a key breakpoint. It also catches iPad Mini in portrait orientation.
Landscape Orientation
All iPad viewport values swap width and height when the device is rotated. An iPad Air in landscape has a viewport of 1180x820, placing it firmly in the "desktop" range for most CSS frameworks. Your tablet-optimized layout may not even be triggered in landscape mode.
Use Case
An enterprise application developer building a dashboard that will be deployed on company-issued iPad Pro devices needs to optimize the layout for iPad Pro 11" and 12.9" in both portrait and landscape orientations.
Try It — Viewport Size Reference
Related Topics
iPhone Viewport Sizes from iPhone SE to iPhone 16 Pro Max
Mobile Viewports
Android Device Viewport Sizes for Samsung, Pixel, and More
Mobile Viewports
Tablet Landscape Viewport Sizes and Layout Considerations
Tablet Viewports
Responsive Design Testing: Essential Viewport Sizes to Test
Responsive Design
Bootstrap 5 Breakpoints: Grid System and Device Coverage
Framework Breakpoints