--- title: "Mobile usability: viewport, touch targets, and text" slug: "mobile-usability" category: "seo" tags: ["seo", "mobile", "viewport", "touch-targets", "accessibility", "typography"] status: "stable" last_updated: 2026-09-27 summary: "Page-level mobile usability rules: the viewport meta tag, touch target sizes (48px design target, WCAG 2.2 24px minimum), readable font sizes, and touch-action for tap delay." related: ["[[seo/mobile-first]]", "[[frontend/accessibility]]", "[[frontend/forms]]", "[[frontend/css]]", "[[cheatsheets/css-viewport-units]]", "[[seo/core-web-vitals]]"] --- ## Overview Mobile-first indexing decides which version of a page Google reads; mobile usability decides whether a person on a phone can actually use it. Google retired its Mobile-Friendly Test and the Search Console Mobile Usability report in December 2023, so these rules come from accessibility standards and design-system guidance rather than a Search score. For responsive architecture, content parity, and AMP, see [[seo/mobile-first]]. ## Declare the viewport meta tag on every page Without the viewport meta tag, mobile browsers render the page at desktop width and zoom out. Text is unreadable; touch targets are pixel-sized. ```html ``` - `width=device-width` matches the browser viewport to the physical screen. - `initial-scale=1` prevents the auto-zoom-out behavior. - Avoid `user-scalable=no` and `maximum-scale=1`. They break accessibility and trigger WCAG failures. - Place the tag early in `` and ship exactly one; duplicate viewport tags make the result depend on browser parsing. ## Size touch targets at 48 pixels minimum Use 48 by 48 CSS pixels as the design target from Material and Lighthouse guidance; WCAG 2.2 sets 24 by 24 as the AA minimum. - Buttons, links in nav, and form controls: minimum 48x48 pixels. - Spacing between adjacent targets: leave a gap (8 pixels is a common Material guideline) so users do not hit the wrong one. - Inline text links inside paragraphs are exempt from the WCAG 2.2 target-size minimum; keep line height generous so adjacent links are still easy to hit. - Inputs in forms: 48 pixels tall minimum. Use `min-height: 48px` plus `padding: 12px`. See [[frontend/forms]]. ## Set readable font sizes by default Tiny text on phones forces readers to zoom, and a page that is hard to use on mobile makes a poor page experience. - Body text: 16 pixels as the practical default. Smaller body text often forces zoom, and iOS Safari zooms into form inputs under 16 pixels. - Use `font-size: 1rem` (which equals 16 pixels by browser default) and let users scale up. - Line height: 1.5 minimum for body text. Tight leading on small screens hurts readability. - Never set `font-size` in pixels on the `` element; it overrides user font-size preferences. ## Kill tap delay with `touch-action` Mobile browsers historically added a 300-millisecond delay after `touchstart` to detect double-tap-zoom. Modern browsers skip the delay when the viewport meta is set, but `touch-action` makes it explicit. - `touch-action: manipulation` on buttons and links removes the delay without disabling gestures. - `touch-action: none` on elements that should not respond to gestures (drag handles, canvases). - Avoid `300ms`-removal libraries; they were a 2014 hack and now interfere with native gesture handling. ## Related - [[seo/mobile-first]]: responsive design, content parity, AMP, and device testing - [[frontend/accessibility]] - [[frontend/forms]] - [[frontend/css]] - [[cheatsheets/css-viewport-units]] - [[seo/core-web-vitals]]