Home / Tools / Mobile-Friendliness Tester

Mobile-Friendliness Tester

Paste a page's HTML (including any style blocks) to check for the structural signals of a mobile-friendly page.

mft.log
waiting for input
Paste page HTML, then click "Run check".

Why this test is static analysis, not a live device simulation

A fully accurate mobile-friendliness test would load a page on real or emulated devices and measure how it actually renders — but that requires a browser to load an arbitrary external page, which cross-origin browser security restrictions correctly prevent a page like this one from doing on your behalf. Rather than fake that kind of live rendering test, this tool takes a more honest approach: it reads the page's own HTML and any inline or embedded CSS you paste in, and checks for the specific structural signals that reliably correlate with a page rendering well on a small screen.

This means the tool is only as good as the HTML and CSS you provide it. If your page's responsive styling lives entirely in an external stylesheet file rather than an inline style block, paste that stylesheet's contents in alongside the HTML for a complete picture — checking only the HTML file without its linked CSS will miss any media queries defined there.

What each check looks for and why it matters

The viewport meta tag check is the single most important item here: without a viewport tag set to device-width, mobile browsers default to rendering the page at a desktop-sized virtual viewport and then shrinking the whole thing down, resulting in tiny, hard-to-read text and content that requires pinch-zooming to use — a pattern search engines have specifically flagged as poor mobile usability for years. The media query check looks for the presence of @media rules in your CSS, which is the standard mechanism for applying different styling at different screen widths; a total absence of any media queries on a page with meaningful layout is a strong sign the design doesn't adapt at all between desktop and mobile.

The fixed-width and small-font checks look for two specific, common mistakes: elements given a large fixed pixel width, which can force horizontal scrolling on a narrow screen regardless of how well the rest of the layout responds, and text set below roughly 12 pixels, which is difficult to read on a small screen without zooming. The legacy plugin check flags any Flash or ActiveX-style embed, technology that isn't supported on the overwhelming majority of mobile browsers at all and effectively makes any content relying on it invisible to mobile visitors.

What this test can't tell you

This tool cannot measure actual tap target sizing and spacing (whether buttons and links are easy to tap accurately with a finger), cannot verify that images and video actually resize proportionally in practice, and cannot catch layout problems that only emerge from the interaction between several CSS rules in ways a static text scan won't detect. For a definitive check, testing a live page on an actual mobile device, or in your browser's built-in device emulation mode, remains the most reliable approach — treat this tool as a fast first pass that catches the most common and consequential mistakes before you move to that manual check.

Frequently asked questions

Why do I need to paste CSS as well as HTML?

Media queries, which control responsive behavior at different screen widths, are typically defined in CSS rather than HTML. If your styles live in an external stylesheet, paste its contents into the same box (or wrap it in a <style> tag) so the tool can see it.

Can this tool load my live website and test it directly?

No — browser security rules prevent a page like this one from fetching and rendering another website's content directly. You'll need to paste in the HTML and CSS yourself, for example by viewing the page source.

Is a missing viewport tag really that serious?

Yes, it's the single most impactful item this test checks. Without it, mobile browsers typically render the page at a desktop width and shrink it down, which usually means tiny unreadable text and a poor mobile experience regardless of anything else on the page.

Does passing every check guarantee a good mobile experience?

It confirms the common structural signals of mobile-friendliness are present, but details like tap target spacing and real-world rendering can only be confirmed by testing on an actual device or a browser's device emulation mode.