Viewport meta tag

The page scales correctly on mobile devices and tablets.

Impact

About

The viewport meta tag helps web pages look good on all devices by controlling the screen size and zoom settings. This makes websites adjust to fit different screens. You can also disable zooming or set a custom zoom level. It's important for making websites mobile-friendly.

Risks

Mobile users see broken pages on their phones.

Why it's important

Optimizes page display for various devices, ensuring content looks good on all screen sizes and enhances user experience.

User stories

As a mobile user, I want the website to scale and display correctly on my device so that I can read and interact with the content without zooming or horizontal scrolling.

Code

Failing pattern:

<!-- Fail: maximum-scale prevents users from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Passing pattern:

<!-- Pass: allows user scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Error

ScanGov messaging when a site fails a standard:

Viewport meta tag is missing.

Example

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

Guidance

21st Century Integrated Digital Experience Act (IDEA)

Indicators

Usability