Mobile Friendly Test: Free Website Checker

A mobile friendly test checks whether a web page is set up to display properly on phones. Enter any URL in this free tool and it reviews the viewport setting, responsive markup, content width, font size and touch target signals, then shows a mobile preview so you can spot problems quickly.

What Does Mobile Friendly Mean?

A mobile friendly website is one that is easy to read and use on a small touch screen without pinching, zooming or scrolling sideways. The text is legible, buttons are easy to tap, and the layout fits the width of the device.

People often ask about "mobile friendly vs mobile responsive." Responsive design is one way to get there: the same HTML adapts to the screen using flexible layouts and CSS media queries. A site can also be mobile friendly with a separate mobile version, but responsive design is the approach most sites use because it keeps one URL and one set of content.

This matters for search. Google uses mobile-first indexing, which means it mainly crawls and evaluates the mobile version of your pages. If your phone layout hides content, loads slowly or breaks, that is the version Google sees.

How to Use the Mobile Friendly Test

You can run the test in under a minute, and you do not need an account. Follow these steps:

1. Type or paste the page address into the box that shows the example.com hint. Starting with https:// is optional, because the tool adds it when it is missing.
2. Start the check with the button under the box. Use the full address of the page you care about, such as a product page or blog post, not just your homepage.
3. Watch the progress steps while the tool works through Viewport, Layout, Touch and Screenshot.
4. Read the status banner at the top of the results. It names the page that was analyzed and explains what kind of analysis was run.
5. Go through the Mobile Optimization Checks list, then read any tips shown below it.
6. Look at the Mobile Preview image to see how the page appears on a phone-sized screen. Use the button at the bottom to test another URL after you make changes.

What Does the Tool Check?

The tool reports five mobile checks, and each one points to a specific fix when it fails.

Viewport configured

This looks for a viewport meta tag, which tells phone browsers to match the page width to the screen width. The standard version is <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, many phones render the page at desktop width and shrink it, so text becomes tiny.

Responsive design detected

The tool looks for signs of responsive CSS, such as media queries and common responsive frameworks. These are clues that the layout adapts to different screen sizes.

Content sized to viewport

This check looks at content width signals. Fixed-width elements, such as a 1,000-pixel table or image, are a common reason for sideways scrolling on a phone.

Touch targets sized properly

Links and buttons need enough room to tap accurately. A widely used guideline is a target of about 48 by 48 CSS pixels with some spacing. The WCAG 2.2 accessibility standard sets a lower minimum of 24 by 24 CSS pixels.

Font size appropriate

Body text should be readable without zooming. A base size of 16 CSS pixels is a common starting point for mobile body copy.

Worked Example: Testing a Small Online Store

Say you run a store at example-shop.com and its product pages look cramped on phones. You enter the product URL and run the check. The Mobile Preview shows the layout at phone width, and the checks list returns a mixed picture.

• Viewport configured: passed, because the page includes the width=device-width tag.
• Responsive design detected: passed, because the stylesheet contains media queries.
• Content sized to viewport: flagged, because a size chart is hard-coded to a wide fixed width.

The fix is to give the table a maximum width of 100% or wrap it in a container that scrolls horizontally on its own. After changing the CSS, you run the test again. The flagged check should clear, and the preview should show the table inside the screen edges. The sequence is test, fix one issue, retest.

How to Read and Act on Your Results

Start with the status banner, because it tells you how much weight to give the results. This tool reads your page's HTML for viewport and responsive markup clues. It does not render the page in a real phone browser, so it does not produce a pass/fail score or a conformance rating.

When a check passes

A pass means the tool found the markup it looks for. That is a good sign, but it does not prove the page feels good on a phone. Compare it with the Mobile Preview and, ideally, open the page on your own device.

When a check fails or is flagged

Use this quick guide:

Who Should Use a Mobile Friendly Test?

Anyone responsible for a public web page can use this check as a fast first pass before deeper testing.

• Site owners and bloggers can confirm that a new theme or template did not break the phone layout.
• SEO specialists can add it to an audit, alongside other checks in the website audit and performance tools.
• Developers can test a staging or live URL after a CSS change to confirm the viewport tag and responsive markup are still present.
• Agencies can check client pages quickly and use the preview image to explain problems to non-technical stakeholders.

It is also useful for a quick competitor comparison, since you can run the test on any public URL.

Best Practices and Common Mistakes

Mobile problems usually come from a few repeat offenders, and most are quick to fix.

• Test real page types. A homepage may be fine while a long article, a checkout page or a page with embedded tables is not. Test one of each.
• Check the exact URL. If your site redirects from http to https or from one hostname to another, the status banner shows the address that was analyzed, so confirm it is the page you intended.
• Do not block zooming. Disabling pinch-to-zoom in the viewport tag hurts users with low vision.
• Watch the page weight. A responsive layout can still be slow on mobile data. Confirm your server compresses files with the GZIP compression checker.
• Keep content equal. Because of mobile-first indexing, do not hide text, images or links on the phone version that exist on desktop.
• Add alt text. Images that scale well still need descriptions, and you can review them with the image alt text checker.

If the result looks wrong

If the tool cannot analyze a page, check the spelling of the address and make sure the page loads publicly in a normal browser without a login. If your page looks fine on your phone but a check is flagged, the markup may be unusual, for example layout rules injected by JavaScript. Compare against the preview and test on a real device.

Limitations to Keep in Mind

This test reads the page's HTML for mobile signals. Real font sizes, tap target dimensions and horizontal overflow depend on the fully rendered layout, so treat those checks as indicators rather than final proof. Google has retired its standalone Mobile-Friendly Test, so a quick markup check like this one is a practical way to catch the most common setup errors. For deeper analysis, test the page on a physical phone and in your browser's device emulation mode.

If you run AMP pages, they have their own rules, which the AMP checker can validate. To confirm that mobile pages are being found at all, the Google index checker shows whether Google has them indexed.

Ready to see how your page looks on a phone? Enter your URL above, run the check, fix what is flagged, and test again. You can also see how much of the page is readable text with the code to text ratio checker.