CSS viewport 820 × 1180 pixels at 2× device pixel ratio. The exact size browsers report on the iPad (A16).
The iPad (A16) viewport is 820 × 1180 CSS pixels (1180 × 820 rotated), with a device pixel ratio of 2 on a 1640 × 2360 pixel 11″ display.
Test your site at iPad (A16) (820 × 1180)
When a user visits your site on the iPad (A16), the browser reports window.innerWidth = 820 and window.devicePixelRatio = 2. Your CSS media queries match against the 820px CSS width, not the 1640 × 2360 physical pixel count of the panel.
At 820px it hits Tailwind md (768px) and Bootstrap md (768px). Rotated to 1180px it moves to Tailwind lg, so check both orientations.
For sharp full-width images, serve a source at least 1640px wide (820 CSS px × 2 DPR) through srcset and let the browser pick it.
/* iPad (A16): 820×1180 CSS px, DPR 2 */
@media (max-width: 820px) {
/* styles for this width and narrower */
}
@media (min-resolution: 2dppx) {
/* serve high-density assets */
}The iPad (A16) reports a CSS viewport of 820×1180 pixels in portrait and 1180×820 in landscape. Browser toolbars reduce the visible height slightly, so window.innerHeight is usually smaller than the full screen height.
The iPad (A16) uses a default device pixel ratio of 2. Each CSS pixel maps to 2×2 physical pixels on its 1640×2360 panel.
At 820px wide it matches Tailwind md (min-width 768px) and Bootstrap md (min-width 768px). Rotated to 1180px it matches Tailwind lg (min-width 1024px).
Open screensize.io, enter your URL and pick iPad (A16) (820×1180). It opens your site in a real browser window at exactly that CSS viewport, so media queries, container queries and JavaScript resize logic behave as they would on the device. For touch behaviour and the real browser engine, confirm on hardware before shipping.
See the full list of device viewport sizes →
Or browse common screen sizes by category →
Use screensize.io to preview your website at any of these resolutions instantly — no DevTools needed.
Open screensize.io →