# Mobile Optimization

> 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.

- Skill: `thisisahsaniqbal/mobile-optimization` (Agent Skill)
- Install (CLI): `npx skillmds@latest add thisisahsaniqbal/mobile-optimization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/thisisahsaniqbal/mobile-optimization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: thisisAhsanIqbal (https://skillmd.com/u/thisisahsaniqbal)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/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