Viewport uses device-width config

mobile_viewport_config

Checks that viewport uses proper device-width config.

What does this rule check?

The viewport should use width=device-width and initial-scale=1 for proper mobile rendering. Fixed-width viewports or missing initial-scale cause layout issues.

Why is this important?

Incorrect viewport configuration can make pages too wide, too narrow, or prevent proper zooming on mobile devices.

How to fix

Set the viewport to width=device-width, initial-scale=1. Avoid setting maximum-scale or user-scalable=no.

Examples

<meta name="viewport" content="width=1024" />
<!-- Fixed width - not responsive -->

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

Agent fix snippet

Copy this snippet and paste it into your AI coding agent to fix this issue automatically.

Fix viewport configuration:

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

Remove width=1024 or any fixed width values.