thisisAhsanIqbal Mobile Optimization
Audit the page for mobile-friendliness.
1. Viewport meta tag
| Check | Status |
|---|---|
Missing <meta name="viewport"> |
❌ FAIL "Page will not render correctly on mobile" |
Present but missing width=device-width |
⚠️ WARN |
Contains user-scalable=no or maximum-scale=1 |
⚠️ WARN "Disabling zoom hurts accessibility" |
| Properly configured | ✅ PASS |
2. Fixed-width elements
Scan all elements with inline style="..." for width: Npx:
- If any element has
width > 500px→ ⚠️ WARN "May cause horizontal scrolling on mobile" - Report the count of offending elements
3. Font sizes
Scan inline styles for font-size: Npx:
- If any element has
font-size < 12px→ ⚠️ WARN "Difficult to read on mobile" - Report the count
4. Touch target sizes
Check interactive elements (<a>, <button>, <input type="submit">, <input type="button">) with inline height style:
- If
height < 48px→ ⚠️ WARN "Too small for touch targets" - Minimum recommended: 48px × 48px (per Google's mobile-friendly guidelines)
5. Overflow detection
- Elements with
overflow-x: hiddenoroverflow: hidden→ ⚠️ WARN "Verify content is not clipped on mobile"
6. Responsive stylesheets
<link rel="stylesheet" media="...">found → ✅ PASS "Media-query-specific stylesheets found"
7. Tables
- If > 2
<table>elements → ⚠️ WARN "Tables can be difficult to read on mobile. Consider responsive table patterns"
Edge cases
- If no inline styles are present, skip fixed-width and font-size checks
- CSS-in-JS frameworks (styled-components, Emotion) embed styles at runtime — these cannot be audited from static HTML alone; note this limitation
- Elements with
display: noneorvisibility: hiddenshould be excluded from touch target checks - AMP pages have their own viewport rules — flag but do not fail if AMP boilerplate is detected
- PWA splash screens and app-shell patterns may intentionally use
user-scalable=no— flag as ⚠️ WARN but note context