How to test whether your website is truly mobile responsive

"It looks fine on my phone" is the most common sign-off for a new website, and one of the least reliable. Your phone is one screen size, one browser and probably a fast connection. To test mobile responsiveness properly you need a short, repeatable routine that covers several widths, real devices and the actions customers actually take, not just a glance at the homepage.

Below is a practical method that a site owner or junior developer can follow in about an hour, plus a checklist for recording what breaks.

Start with a list of pages and tasks, not devices

Before touching any tool, write down what you are going to test. Responsive bugs tend to hide on the pages nobody opens during development: a long policy page, a blog post with a wide table, the thank-you screen after a form.

A sensible starting set for a small business site is:

• Homepage
• One or two main service or product pages
• A blog post with images, and ideally one with a table or embedded video
• Contact page and the enquiry form itself, including its success and error states
• Cart and checkout, if you sell online
• Your login or account area, if customers have one

For each page, note the task a visitor should be able to complete, such as "tap to call", "submit enquiry" or "add to cart". Testing the task, not just the look, is what catches real problems.

Using Chrome device mode for a fast first pass

Chrome DevTools has a device toolbar that lets you view a page at different screen widths without owning every phone. Open DevTools with F12 or Ctrl+Shift+I, then click the phone-and-tablet icon, or press Ctrl+Shift+M.

Widths worth checking

There is no official list of breakpoints, but checking a spread of common widths catches most issues:

• 360px, typical of many budget and mid-range Android phones
• 375px to 414px, covering most recent iPhones and larger Androids
• 768px, a portrait tablet
• 1024px, a landscape tablet or small laptop
• 1280px and above, standard laptops and desktops

Then switch to "Responsive" and slowly drag the width from wide to narrow. Layouts often break between breakpoints, for example at 540px where a two-column section suddenly overlaps. Dragging reveals those awkward in-between widths that preset devices skip.

What device mode cannot tell you

Device mode simulates screen size and touch events, but it runs on your computer's processor, uses desktop Chrome's rendering and ignores the phone's on-screen keyboard. It will not show you how iOS Safari handles a form, how a cheap phone copes with heavy scripts, or how the address bar collapsing changes the visible height. Treat it as a filter, not a final answer.

Testing on real phones: the step you cannot skip

Borrow two or three handsets from colleagues or family. Aim for variety rather than quantity: one iPhone, one budget Android with a smaller screen, and if possible one older device. Use each phone's default browser as well as Chrome.

On each device, work through your page list and actually do the tasks. Fill the form with real-looking data. Tap the WhatsApp button and check it opens the chat. Rotate the phone to landscape and back. Scroll to the footer. Open the menu, then close it.

Viewing a local site on a phone

If the site is not live yet, a developer can use Chrome's remote debugging over USB to inspect a page on a connected Android phone, or share a staging link protected by a password. Avoid pushing unfinished work to the live domain just to test it.

The mobile responsiveness checklist

Use this list on every page and device combination. Anything that fails goes into a simple spreadsheet with the page, device, width and a screenshot.

1. No sideways scrolling anywhere on the page.
2. Body text is readable without pinching to zoom.
3. Images and videos fit inside the screen and are not stretched or cropped awkwardly.
4. The menu opens, closes and lets you reach every important page.
5. Buttons and links are easy to tap without hitting the neighbour.
6. Phone numbers, email addresses and WhatsApp links open the right app.
7. Forms show the correct keyboard, fields are not hidden behind it, and the submit button is reachable.
8. Error and success messages are visible without scrolling back up.
9. Popups, cookie banners and chat bubbles can be closed and do not cover key content.
10. Tables either fit or scroll inside their own box rather than stretching the page.
11. The layout survives rotation to landscape and back.
12. Sticky headers or footers do not eat half the screen on small phones.

Automated checks that support manual testing

Google retired its standalone Mobile-Friendly Test tool in late 2023, so owners now rely on other sources. Lighthouse, built into Chrome DevTools, runs a mobile audit that flags issues such as a missing viewport tag, text too small to read and tap targets that are too close. PageSpeed Insights runs the same checks online and adds real-user speed data where Google has enough visits.

In Google Search Console, the Core Web Vitals report groups mobile URLs by performance, which can point you towards templates that struggle on phones. None of these tools will notice that your menu hides the "Book now" link, so they complement a human test rather than replace it.

Turning test results into fixes

Once your spreadsheet is filled, sort problems by impact. Anything that blocks a task, such as an unreachable submit button or a menu that will not open, is urgent. Visual oddities on a rarely visited page can wait.

Group similar faults, because they usually share a cause. Five pages overflowing sideways often trace back to one fixed-width element in a shared template. Retest on the same devices after each fix, and repeat the whole routine whenever you change your theme, add a plugin or launch a new page type.

If the list is long or the fixes reach into the theme code, it may be quicker to get help. Our team can run this audit and repair the layout as part of our website development work, or you can ask an expert about a specific problem first.

Frequently asked questions

Can I test mobile responsiveness without a smartphone?

You can get a long way with Chrome or Firefox responsive design modes, which simulate many screen widths. However, keyboard behaviour, real touch and slower processors are only visible on actual devices, so borrow a phone before launch.

How often should I retest my website on mobile?

Retest after any theme update, new plugin, redesign or new page template, and do a quick full pass every few months. Content edits like adding a wide table can break layouts too.

Which screen size is most important for Indian visitors?

It varies by audience, so check the device report in GA4 for your own site. Many visitors use Android phones around 360 to 412 pixels wide, which makes that range a sensible priority.

Why does my site look fine in DevTools but broken on my phone?

Common reasons include browser differences such as Safari handling of viewport height, the on-screen keyboard covering fields, cached old files on the phone, or fonts and scripts loading differently on a slower connection.