Mobile-friendly website guides
Every problem MobileCheck can find, explained: what it means, why it matters on a phone, and exactly how to fix it — with code you can copy.
Layout
The viewport meta tag: what it does and the one line you needThe one line of HTML that tells phones to lay out your page at screen width, explained attribute by attribute.Website wider than the screen on mobile? How to find and fix horizontal scrollFind the element that pushes your page past the screen edge and fix sideways scrolling with the right CSS, not a band-aid.Text overlapping or cut off on mobile: causes and fixesWhy headings, labels and buttons overlap or get cut off on phones, and the CSS patterns that fix it for good.Sticky headers, cookie banners and pop-ups on mobileKeep sticky headers, bottom bars, cookie banners and pop-ups from eating the small screen, and make every overlay easy to close.
Readable text
Text too small to read on mobile: the right font sizes for phonesRecommended font sizes for phones, how to set them with rem and clamp(), and why form fields need 16px on iPhone.Low contrast text: WCAG contrast ratios and how to fix themThe WCAG contrast ratios for text, what counts as large text, and practical fixes for light mode, dark mode, placeholders and text on images.user-scalable=no: why you should not disable zoom on mobileWhat user-scalable=no and maximum-scale do, how browsers treat them, and better ways to solve the problems people disable zoom for.Line height and line length for readable text on any screenComfortable line spacing and line length in CSS: unitless line-height, max-width in ch, and no cramped columns on phones.Web font not loading on iPhone or Android? How to fix itWhy custom fonts fail on phones (CORS, subsets, formats, paths) and how to load them reliably with a fallback that matches.
Touch
Dark mode and large text
How to test your website in dark mode on mobileWhat happens to your site when a phone is in dark mode, how to support it with prefers-color-scheme, and how to test it for free.How to test your website with large text on iPhone and AndroidWhat happens when visitors enlarge text on their phones, what WCAG expects, and how to build layouts that survive text at 150% and beyond.
Speed
Largest Contentful Paint: How to Improve LCP on MobileWhat counts as the LCP element, why it is slow on phones, and how to get it under 2.5 seconds.Cumulative Layout Shift: How to Fix CLS on MobileWhy content jumps while a page loads and how to keep CLS under 0.1 with reserved space and safer animations.Page Weight: How to Reduce Page Size for MobileWhat makes pages heavy, how to find the biggest files, and how to cut images, video, JavaScript and fonts.