thisisahsaniqbal/mobile-optimization

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