Mobile Rules

Rules for validating mobile-friendliness.

mobile-viewport

Advanced viewport validation.

Checks

width=device-width present
No user-scalable=no (accessibility issue)
No maximum-scale=1 restrictions

Examples

Pass:

<meta name="viewport" content="width=device-width, initial-scale=1">

Warning:

<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- Warning: Disabling zoom hurts accessibility -->

Warning:

<meta name="viewport" content="width=device-width, maximum-scale=1">
<!-- Warning: Restricting zoom hurts accessibility -->

Configuration

rules: {
  'mobile-viewport': {
    severity: 'warning',
  },
}

touch-targets

Checks for adequately sized touch targets.

Checks

Minimum 48x48px tap targets
Adequate spacing between links
Icon-only buttons have accessible names

Examples

Info:

<button style="width: 24px; height: 24px">X</button>
<!-- Info: Touch target may be too small (aim for 48x48px) -->

Info:

<a href="/edit"><i class="icon-edit"></i></a>
<!-- Info: Icon-only link may need accessible text -->

Pass:

<button style="padding: 12px 16px">Submit</button>
<a href="/edit" aria-label="Edit post"><i class="icon-edit"></i></a>

Configuration

rules: {
  'touch-targets': {
    severity: 'info',
  },
}

mobile-font-size

Detects small fonts that are hard to read on mobile.

Checks

No fonts smaller than 12px
No fonts smaller than 9pt
No fonts smaller than 0.75em/rem

Examples

Warning:

<p style="font-size: 10px">Fine print</p>
<!-- Warning: Font size too small for mobile (10px) -->

Warning:

<style>
  .small { font-size: 8pt; }
</style>
<!-- Warning: Font size too small (8pt, minimum 9pt) -->

Pass:

<p style="font-size: 14px">Readable text</p>
<p style="font-size: 1rem">Readable text</p>

Configuration

rules: {
  'mobile-font-size': {
    severity: 'warning',
  },
}

mobile-media

Checks responsive images and iframes.

Checks

Images have max-width: 100%
Iframes have responsive containers
No fixed-width elements breaking layout

Examples

Info:

<img src="wide.jpg" style="width: 1200px">
<!-- Info: Fixed-width image may overflow on mobile -->

Info:

<iframe src="video.html" width="800" height="450"></iframe>
<!-- Info: Fixed iframe may not be responsive -->

Pass:

<img src="photo.jpg" style="max-width: 100%; height: auto">

<div style="aspect-ratio: 16/9">
  <iframe src="video.html" style="width: 100%; height: 100%"></iframe>
</div>

Configuration

rules: {
  'mobile-media': {
    severity: 'info',
  },
}

mobile-friendly-links

Validates navigation link spacing for touch devices.

Checks

Navigation links have adequate spacing
Too many links in a row may cause tap issues
Warns if many links with short text

Examples

Info:

<nav>
  <a href="/a">A</a>
  <a href="/b">B</a>
  <a href="/c">C</a>
  <!-- ... 20 more links -->
</nav>
<!-- Info: Navigation has 23 links - ensure adequate spacing -->

Pass:

<nav style="display: flex; gap: 16px">
  <a href="/home">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

Configuration

rules: {
  'mobile-friendly-links': {
    severity: 'info',
  },
}

Mobile Checklist

Viewport

Proper viewport meta tag
No zoom restrictions
width=device-width

Touch

48x48px minimum tap targets
Adequate spacing between links
Icon buttons have labels

Typography

Minimum 12px font size
Readable without zooming
Good contrast

Layout

Responsive images
Responsive iframes
No horizontal scrolling

Best Practice Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-size: 16px; }
    img { max-width: 100%; height: auto; }
    button { min-height: 48px; min-width: 48px; }
    nav a { padding: 12px 16px; }
  </style>
</head>
<body>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <main>
    <img src="photo.jpg" alt="Description">
    <button>Submit</button>
  </main>
</body>
</html>