Use viewports for fast layout checks
A responsive preview can emulate several screen sizes in the current browser and make comparisons quicker. It is useful for checking layout changes. It does not turn that browser into every physical phone shown in the preview.
Test around your actual layout changes
Check widths just before and after the points where your design changes. Include long headings, empty states, errors and content-heavy screens. Look for clipped text, unwanted horizontal scrolling and controls that disappear when space gets tight.
Include orientation and zoom
Review both portrait and landscape where your product supports them. Check that important content and controls remain usable when zoomed, including a 200% text and page review as appropriate to the browser. Responsive quality includes readability and task completion, not simply fitting the screen.
Finish with real interaction
Take representative layouts onto physical devices to check tapping, scrolling and keyboard behavior. Use that step to confirm what the layout preview suggests. Treat mobile website checks and browser compatibility checks as related parts of the same release plan.
Your testing checklist
- Check a narrow phone, tablet and desktop layout
- Review widths around each key breakpoint
- Use long text and content-heavy states
- Check navigation, dialogs and form errors
- Review orientation and zoom without losing essential controls
- Complete the critical task on a representative physical device
A practical workflow
Map the layout states
List the widths and orientations where navigation or content changes.
Compare the edge cases
Review before/after breakpoint widths with realistic and difficult content.
Validate interaction on hardware
Use a physical phone or tablet to confirm touch, keyboard and task completion.
Common questions
No. A responsive preview can emulate viewport sizes inside one browser. A real-device session runs on physical hardware. These checks answer related but different questions.
Available space and content size change in those states. Checking them helps reveal unreadable content, clipped controls and layouts that prevent a user from completing a task.
Screenshots are useful evidence of appearance. Add interaction checks for menus, dialogs, forms and the on-screen keyboard so your review also covers usability.
Technical references
Official documentation for the underlying testing concepts. Available capabilities vary by provider and setup.
Sauce Labs live cross-browser testingBrowserStack responsive Toolkit documentationBrowserStack responsiveness assisted test