| name | mobile-optimization |
| description | Validates viewport meta configuration, responsive design, font sizes, touch target sizes, and mobile-hostile patterns. Use when checking mobile-friendliness or fixing mobile rendering issues.
|
| license | MIT |
| metadata | {"author":"Muhammad Ahsan Iqbal (https://muhammadahsaniqbal.com)","linkedin":"https://www.linkedin.com/in/ahsan-iqbal-digitalmarketingexpert/","version":"1.0"} |
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: hidden or overflow: 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: none or visibility: hidden should 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
