How to Test Your Website on iPad
iPad viewport sizes, the tablet layout gap most sites miss, and a fast workflow for testing iPad portrait and landscape properly.
6 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
The tablet gap is where layouts break
Most teams test phone and desktop but skip tablet, so iPad lands in an awkward middle zone: too wide for the mobile layout, too narrow for desktop. The result is stretched cards, cramped multi-column grids, and navigation that neither collapses nor fully expands. iPad deserves explicit attention precisely because it falls between your two main breakpoints.
iPad sits in the 768-1024px layout handoff zone
Mobile layouts stretch awkwardly at tablet width
Desktop layouts feel cramped on a portrait iPad
Navigation often misbehaves between collapse and expand
iPad viewport sizes to test
Test both orientations, since portrait and landscape can trigger entirely different layouts. Standard iPad is 768px portrait, iPad Air and Pro 11-inch are around 820-834px, and the 12.9-inch Pro is 1024px portrait - which is wide enough to hit desktop breakpoints. Always include landscape, where a portrait-only design can fall apart.
768px portrait for the standard iPad
820px and 834px for iPad Air and 11-inch Pro
1024px portrait for the 12.9-inch Pro
Landscape widths up to 1366px for large iPads
Test both orientations side by side
Switching a single window between orientations is slow and hides relational bugs. Viewing iPad portrait and landscape together makes orientation issues obvious at a glance. Sizzy lets you add multiple iPad profiles in both orientations and interact with them in sync, so you confirm the tablet experience without owning every model.
Open iPad portrait and landscape simultaneously
Confirm grids reflow sensibly at tablet width
Check that touch targets stay comfortably sized
Verify navigation behavior at the tablet boundary
Release checklist
Test a dedicated tablet layout, not just phone and desktop.
Cover 768px, ~820px, and 1024px iPad widths.
Check both portrait and landscape orientations.
Confirm navigation behaves in the tablet handoff zone.
Frequently asked questions
What is the iPad viewport size in CSS pixels?
The standard iPad is 768px wide in portrait, iPad Air and 11-inch Pro are around 820-834px, and the 12.9-inch Pro is 1024px portrait. Landscape widths range up to about 1366px on the largest models.
Why does my site look broken on iPad?
iPad usually falls between your mobile and desktop breakpoints, so neither layout fits well. Add a tablet-range check around 768-1024px and adjust grids and navigation for that zone specifically.
Do I need a real iPad to test?
For layout you can test accurate iPad viewports in a development browser like Sizzy, including both orientations. Validate on a real iPad for touch and Safari-specific behavior before a major release.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.