Check the website in a mobile preview

What Makes This Mobile-Friendly Test Visible

A page can look good on the desktop and still be poorly operable on the smartphone. Common causes are rigid widths, tables without scroll area, long inseparable texts or too small navigation elements. The tool renders the loaded HTML with the available stylesheets in an isolated browser preview and measures the resulting dimensions.

You can choose between 360, 390 and 430 CSS pixels. The evaluation shows horizontal spread, visible text areas under twelve pixels and selected operating elements under 24 pixels in one dimension. These sleepers are used for visual inspection. They do not replace a full accessibility check; for example, links in the flow text have different requirements than stand-alone buttons.

Check the viewport and responsive widths

For the typical responsive representation, an indication such as <meta name="viewport" content="width=device-width, initial-scale=1"> needed. Missing width=device-widthThis preview simplifies a 980-pixel layout area and reduces it to the chosen smartphone width. Thus, the frequent effect of a tiny displayed desktop page becomes visible.

Fix spreading at the cause: flexible containers, matching image widths and an own horizontal scroll area for wide tables are usually more useful than a flat-rate overflow-x:hidden. Check long URLs and words separately. Hiding a protruding element does not automatically make its content usable.

The Limits of Isolated Preview

JavaScript is not executed for security and cost reasons. Menus, cookie banners or content that is only created by scripts may be missing. external font files, background images, CSS imports and responsive image sources from srcset are not reloaded. The tool uses available replacement fonts. Unloaded style sheets and images are displayed; for important failures, the layout is only meaningful to a limited extent.

The URL is retrieved with a Seitenreport test agent. It is not a Googlebot crawl and not a complete device emulation. In addition, use a real smartphone browser to test touch control, zoom, form flows and reloaded content.

How to use the results in everyday work

1. load the URL and read the instructions for completeness.
2. Preview and view affected elements.
3. Find the right CSS selector in your own style sheet and correct the cause.
4. Test again with a further width.
5. Share PNG preview and CSV fund list for implementation.

Frequent questions