The quickest free way is the device mode built into Chrome, Edge and Firefox. It resizes the page to any width, imitates touch and a phone's pixel density, and costs nothing. Use it for layout, then confirm the important flows on one or two real phones.
Use your browser's device mode
- Open the page and press F12 (or right-click → Inspect).
- Click the device icon in the top-left of the developer tools (Chrome and Edge), or press Ctrl+Shift+M in Firefox.
- Pick a device from the list, or choose Responsive and type a width.
- Reload the page after switching: many sites decide on the layout at load.
- Drag the edge of the viewport slowly from narrow to wide. Layouts usually break between the sizes they were designed for, not at them.
Which widths to test
| Width (CSS pixels) | Stands for |
|---|---|
| 320 | Small and older phones, and any phone with large text settings |
| 360 – 414 | Most Android phones and iPhones |
| 600 – 820 | Large phones in landscape, small tablets |
| 1024 | Tablets in landscape, small laptops |
| 1280 – 1440 | Laptops |
| 1920 | Desktop monitors |
Also test landscape on a phone (about 667 by 375): fixed headers and footers can leave almost no room for content.
What to look for at each width
- Horizontal scroll: the page should never move sideways.
- Text that overlaps, wraps awkwardly or is cut off.
- Buttons and links big enough to tap.
- The menu, dialogs and forms: open them, do not just look at them.
- Images: not stretched, not blurry on sharp screens.
- Fixed bars and banners: how much of the screen is left.
When you need real devices
Device mode imitates the screen size, not the device. It cannot reproduce Safari's rendering on iPhone, the on-screen keyboard pushing the layout up, browser toolbars appearing and disappearing, or real touch behaviour. Before a launch, test the main flows (navigation, sign-up, checkout, contact form) on at least one iPhone and one Android phone.
Online services that screenshot a page on many devices are useful for a quick visual sweep, and paid cloud device labs give you real browsers when you need Safari without owning an iPhone.
Automate it for the whole site
Checking ten widths by hand is fine for one page and impossible for every template. SignalCrawler opens sampled pages of each template in a real browser at ten widths, from 320 pixels to desktop, and reports horizontal scroll, overlapping and cut-off elements, small tap targets and text, fixed elements that cover the screen and menus that open off screen, each with a screenshot. Try the free mobile-friendly test.