Free mobile-friendly checker

What this tool checks

• Viewport tag

  Whether the page has a viewport meta tag. Without it, phones show a zoomed-out desktop layout with tiny text.

• Content wider than the screen

  Whether the page is wider than the screen at each size, which causes sideways scrolling and cut-off content.

• Three screen sizes

  Desktop (1280×800), tablet (768×1024) and phone (390×844), with the tablet and phone views emulating a mobile browser.

• Screenshots

  A screenshot of the first screen at each size, so you can see what visitors see.

• Loading problems

  Whether the page failed or timed out at any of the sizes.

How the check works

Common problems we find

• No viewport tag

  Common on older sites and hand-built pages; the phone view looks like a shrunken desktop page.

• Fixed-width elements

  Containers, tables or embeds set to a fixed pixel width that's wider than a phone screen.

• Images and videos that don't shrink

  Media without max-width: 100%, pushing the page wider than the screen.

• Wide tables

  Pricing or comparison tables with many columns.

• Long unbroken text

  Long URLs, email addresses or code that can't wrap onto the next line.

How to fix them

1. 1

   Add the viewport tag

   Put <meta name="viewport" content="width=device-width, initial-scale=1"> in the page head. Most modern themes already include it.

2. 2

   Use flexible widths

   Replace fixed pixel widths with max-width and percentages, and use CSS grid or flexbox so layouts wrap on small screens.

3. 3

   Make media shrink to fit

   In your CSS, give images, videos and iframes max-width: 100% and height: auto.

4. 4

   Let wide tables scroll inside their own box

   Wrap tables in a container with overflow-x: auto, or stack columns on small screens.

5. 5

   Allow long words to break

   Use overflow-wrap: anywhere on text areas that may contain long URLs.