To view a website as an iPad in Chrome, open DevTools, toggle the device toolbar (Ctrl + Shift + M, or Cmd + Shift + M on a Mac), and choose an iPad from the Dimensions list or type a tablet size such as 820 × 1180. A mobile view extension with tablet presets does the same from a toolbar button. Before you trust what you see, though, read the section on iPad Safari below: real iPads often load the desktop version of a site.
Why tablet testing is easy to get wrong
Tablets sit in the awkward middle of responsive design. Their portrait width (roughly 744 to 1032 CSS pixels for current iPads) lands right on the most common breakpoints, 768 px and 1024 px. A layout can switch between “phone” and “desktop” when the tablet rotates, and sticky headers, side menus and multi-column grids tend to break exactly there.
There is a second trap that has nothing to do with width.
iPad Safari asks for the desktop site by default
Since iPadOS 13, Safari on iPad requests the desktop version of websites by default. It sends a user agent that looks like Safari on a Mac, not like an iPad. That means:
- a server that detects mobile devices by user agent will treat the iPad as a desktop computer
- your CSS still follows the real viewport width, so media queries behave as expected
- touch is still the only input, even though the site thinks it is talking to a Mac
So when you emulate an iPad in Chrome with an “iPad” user agent, you may see a version of your site that real iPad users never get. For an honest test, check both: the iPad viewport with a mobile/iPad user agent, and the same viewport with a desktop user agent. In DevTools you can override the user agent in More tools > Network conditions; the steps are in how to change the user agent in Chrome.
Method 1: DevTools device mode
- Open DevTools and toggle the device toolbar.
- In the Dimensions menu, choose an iPad model if it is listed. If not, click Edit and enable more devices, or choose Responsive and type the size.
- Rotate with the rotate icon to test landscape.
- Reload the page.
Device mode also emulates touch events, which helps when you test tablet menus that open on tap. More detail is in the Chrome mobile emulator guide.
Method 2: a mobile view extension with tablet presets
If you check tablet layouts often, an extension is quicker. Mobile View Extension includes tablet presets next to phones, supports portrait and landscape, and lets you enter a custom resolution when your target device is not in the list. It reloads the tab with the matching user agent and screen size and keeps that view while you navigate. As with any in-browser preview, it uses the mouse rather than touch input.
Method 3: Xcode Simulator for real iPad Safari
On a Mac, the Xcode Simulator runs real iPadOS with Safari. It shows the desktop-site behaviour described above, Safari’s own rendering, and the on-screen keyboard. It is free but large, and macOS only. See how to test a website on iPhone without an iPhone; the steps for iPad are the same.
Current iPad viewport sizes
These are CSS viewport sizes in portrait, derived from Apple’s published screen resolutions divided by a device pixel ratio of 2.
| iPad model | Screen | Physical resolution | CSS viewport (portrait) |
|---|---|---|---|
| iPad mini (6th and 7th generation) | 8.3” | 1488 × 2266 | 744 × 1133 |
| iPad (10th generation and A16) | 10.9–11” | 1640 × 2360 | 820 × 1180 |
| iPad Air 11-inch (M2 and later) | 11” | 1640 × 2360 | 820 × 1180 |
| iPad Air 13-inch (M2 and later) | 13” | 2048 × 2732 | 1024 × 1366 |
| iPad Pro 11-inch (M4 and later) | 11” | 1668 × 2420 | 834 × 1210 |
| iPad Pro 13-inch (M4 and later) | 13” | 2064 × 2752 | 1032 × 1376 |
Check Apple’s technical specifications page for the exact model you target, since Apple refreshes iPads often.
Android tablets vary much more. A useful set for testing is 800 × 1280, 600 × 960 (small 7–8 inch tablets) and a wide landscape size such as 1280 × 800.
What to check at tablet size
- Navigation. Does the menu switch from a hamburger to a full bar at a width where the full bar actually fits?
- Grids. Do three-column card grids become cramped two-column grids with orphaned items?
- Hover-only interactions. Dropdowns that open on hover do nothing on a touch screen. Make sure they also open on tap.
- Landscape. Rotate and re-check: 1180 px wide in landscape can trigger your desktop layout on a 10.9-inch screen.
- Images and video. Tablets have high-density screens, so low-resolution images look soft.
Breakpoints that suit tablets are discussed in responsive breakpoints.
Frequently asked questions
What screen size should I use for iPad testing?
Start with 820 × 1180 (iPad and iPad Air 11-inch) and 1024 × 1366 (13-inch models), in both orientations. Add 744 × 1133 if iPad mini matters to your audience.
Why does my site show the desktop version on iPad?
iPad Safari requests desktop websites by default and sends a Mac-like user agent. If your site picks its version by user agent, the iPad gets the desktop one. A responsive layout that relies on CSS width avoids the problem.
Can I test a tablet view in Chrome without DevTools?
Yes. A mobile view extension with tablet presets, such as Mobile View Extension, shows tablet sizes from a toolbar button.