iPad Pro 12.9-Inch Display Overview
The 12.9-inch iPad Pro features a native resolution of 2048x2732 pixels with a device pixel ratio of 2x, resulting in a logical viewport of 1024x1366 in portrait orientation. This makes the iPad Pro's viewport wider than many laptop screens when held in landscape (1366x1024 logical pixels), which has significant implications for responsive design. The display supports the P3 wide color gamut, ProMotion 120Hz refresh rate, and on recent models, mini-LED or OLED technology. Web developers building applications for iPad Pro users need to consider that these users expect desktop-class web experiences with touch-optimized interactions.
Responsive Design for iPad Pro Viewports
The iPad Pro's 1024x1366 logical viewport sits in an awkward middle ground between traditional tablet and desktop breakpoints. In portrait mode at 1024px wide, most CSS frameworks trigger their desktop layout, which may not account for touch interactions. In landscape at 1366px, the viewport is wider than many laptop screens. The recommended approach is to use @media (min-width: 1024px) and (pointer: coarse) to detect iPad Pro users who are on a touch device at a desktop-like width. This allows you to serve a desktop layout with touch-friendly tap targets (minimum 44x44 points as per Apple's Human Interface Guidelines). Consider using the hover media feature to disable hover-dependent interactions: @media (hover: none) indicates a touch-primary device.
Split View and Multitasking Viewports
iPadOS supports Split View multitasking, which dramatically changes the available viewport for web content. In 50/50 Split View on the 12.9-inch iPad Pro, each app receives approximately 507px of logical width in portrait, which triggers mobile layouts in most responsive frameworks. In 70/30 split, the primary app gets roughly 694px while the secondary gets about 320px. Slide Over mode presents a narrow 320px-wide floating window. Your responsive design must handle these viewport sizes gracefully. Test your web application at 320px, 507px, 694px, and 1024px widths to cover all iPad Pro multitasking scenarios. Safari on iPadOS reports these viewport changes through standard resize events and media queries.
Image Assets and Performance
With a 2x device pixel ratio, images on the iPad Pro need to be served at double their CSS display dimensions to appear sharp. A full-width image in portrait mode needs to be at least 2048px wide (1024 CSS pixels times 2x DPR). Use responsive images with srcset and sizes attributes to serve appropriate resolutions. Performance is a key consideration because iPad Pro users may be on cellular connections despite having a large screen. Implement lazy loading for below-the-fold images using the loading="lazy" attribute, and prioritize above-the-fold hero images with fetchpriority="high". For the best experience, serve images in WebP or AVIF format with JPEG fallback, and keep individual image payloads under 200KB where possible.