Mobile Optimization
Mobile UX
Validates viewport meta configuration, responsive design, font sizes, touch target sizes, and mobile-hostile patterns.
Key Checks
Viewport meta tag
Fixed-width elements
Font size checks
Touch target sizes (48×48px)
Overflow detection
Responsive stylesheets
Audit Checks
| Check | Status | Rule |
|---|---|---|
| Missing viewport meta tag | FAIL | Page will not render correctly on mobile |
| Missing width=device-width | WARN | Viewport not properly configured |
| user-scalable=no detected | WARN | Disabling zoom hurts accessibility |
| Element width > 500px | WARN | May cause horizontal scrolling |
| Font size < 12px | WARN | Difficult to read on mobile |
| Touch target < 48px | WARN | Too small for touch targets |
Industry Thresholds
Min touch target size
48px × 48px
Max fixed-width
500px
Min font size
12px
Related Skills
Edge Cases
- Skip fixed-width/font-size checks if no inline styles present
- CSS-in-JS frameworks embed styles at runtime
- AMP pages have their own viewport rules
Try These Prompts
Copy any prompt below and paste it into your AI coding agent to run Mobile Optimization checks:
“Check my viewport meta tag — does it have width=device-width and is zoom enabled?”
“Are there any elements wider than 500px that could cause horizontal scroll on mobile?”
“Find all touch targets (buttons, links) smaller than 48×48px”
“Are there any font sizes below 12px that are hard to read on mobile?”
“Does this page have responsive stylesheets with media queries?”