# Device/Browser Matrix

**SHOULD** · **ID:** `performance-device-matrix` · **Category:** performance
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/performance-device-matrix

> SHOULD: Test iOS Low Power Mode and macOS Safari

Test iOS Low Power Mode and macOS Safari

Performance varies dramatically across devices and browsers. iOS Low Power Mode throttles animations and JavaScript. Safari has different behavior than Chrome. Test on real devices, not just desktop browsers.

## Bad — do not do this

`performance-device-matrix-bad`

```tsx
export function DeviceMatrixBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="font-semibold mb-3">Testing Checklist</h3>
        <div className="space-y-2">
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-success rounded-sm flex items-center justify-center">
              <svg className="w-3 h-3 text-success-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span className="text-sm">Chrome Desktop</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 border border-border rounded-sm" />
            <span className="text-sm text-muted-foreground">Firefox</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 border border-border rounded-sm" />
            <span className="text-sm text-muted-foreground">Safari</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 border border-border rounded-sm" />
            <span className="text-sm text-muted-foreground">iOS Low Power Mode</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 border border-border rounded-sm" />
            <span className="text-sm text-muted-foreground">Android</span>
          </div>
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          Only tested on Chrome. Other browsers and devices may have different behavior.
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        Chrome-only testing misses Safari and mobile issues
      </p>
    </div>
  );
}
```

## Good — do this

`performance-device-matrix-good`

```tsx
export function DeviceMatrixGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="font-semibold mb-3">Testing Checklist</h3>
        <div className="space-y-2">
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-success rounded-sm flex items-center justify-center">
              <svg className="w-3 h-3 text-success-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span className="text-sm">Chrome Desktop</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-success rounded-sm flex items-center justify-center">
              <svg className="w-3 h-3 text-success-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span className="text-sm">Firefox</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-success rounded-sm flex items-center justify-center">
              <svg className="w-3 h-3 text-success-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span className="text-sm">macOS Safari</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-success rounded-sm flex items-center justify-center">
              <svg className="w-3 h-3 text-success-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span className="text-sm">iOS + Low Power Mode</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-success rounded-sm flex items-center justify-center">
              <svg className="w-3 h-3 text-success-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span className="text-sm">Android Chrome</span>
          </div>
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          Tested on all major browsers and devices, including Low Power Mode.
        </p>
      </div>
      <p className="text-xs text-success mt-4">
        Full device/browser matrix ensures consistent experience
      </p>
    </div>
  );
}
```

## References

- [Cross Browser Testing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction)