mobile-optimization

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