A layout can look balanced on a desktop and feel crowded on a phone. Responsive testing is the process of checking how your content and controls adapt as the available space changes. Device Simulator gives you 27 phone and tablet starting points for that work.
Start with a task, not a screenshot
Choose one thing a visitor should be able to do: find a product, read an article, or send a message. Enter your site’s URL and complete that task inside the device frame. Check whether the next action is obvious, the text is readable, and important controls remain reachable as you scroll.
Understand the viewport you are testing
The iPhone 13 Pro Max preset uses 428 × 926 CSS pixels in portrait. The iPad Pro 12.9-inch uses 1024 × 1366, and the iPad mini 8.3-inch uses 744 × 1133. These are layout dimensions, not the displays’ physical pixel counts. The preset uses the whole rectangle for the page; real browser toolbars and system safe areas can reduce the visible area.
Fit to screen scales that rectangle down to fit your workspace. A tablet shown at 50% still lays out content at its selected tablet width. This distinction helps you review a large viewport even from a smaller laptop.
Check navigation and content together
Start with the phone preset in portrait. Open the navigation menu, follow a nested link, and return to your starting point. Look for menus that extend beyond the screen, titles that collide with nearby elements, and fixed headers that cover focused content.
Then switch to iPad mini. Intermediate widths often reveal problems hidden by desktop and phone breakpoints: a two-column layout may have too little room for labels, or a sidebar may leave the main article too narrow. Try long headings and realistic content rather than short placeholders.
Rotate and look for overflow
Landscape swaps the viewport width and height. Pay attention to shorter available heights, especially with dialogs, sticky headers, and large hero sections. Scroll to the end of the page and check for unexpected horizontal movement. A wide table or an image with a fixed width can push the whole page sideways.
Exercise forms and interactive states
Try a form with empty fields, invalid values, and long text. Make sure validation messages fit, labels remain visible, and the submit action stays accessible. Use a test environment when a submission could make a real purchase, send a message, or change account data.
Keyboard focus and screen-reader behavior need their own checks. A visually correct layout does not establish accessibility. Use keyboard navigation and your browser’s accessibility tools alongside a visual review.
Handle websites that refuse embedding
A website can reject iframe previews through X-Frame-Options or Content Security Policy. This is a restriction controlled by that website, not a viewport problem. Device Simulator cannot remove those response headers. Open the page directly or configure a development site you control to permit the simulator’s origin. Do not disable protection broadly on an authenticated production site just for a preview.
Finish on a real device
This tool uses your current browser engine. It does not change the user agent, reproduce Safari-specific rendering, simulate a virtual keyboard, or turn your mouse into touch input. Confirm touch targets, safe-area spacing, mobile keyboard behavior, performance, and browser-specific issues on actual devices before release.
Open Device Simulator →