Multiple viewports specified

Rule from mobile under compatibility category

What is a trooper!

we have submitted your edit to the community for review! We'll review and make it live on the site in the next few hours, the internet thanks you :).

Browse another section of the knowledge base



Suggest an edit

Cancel

This rule has no content... yet.

Add content to this rule

Or just browse to view rules that have content



 

The viewport controls how your webpage is rendered on mobile devices. If no viewport is specified mobile devices will try to render with typical desktop width for compatibility which breaks user experience.

To avoid problems with screen sizes it's not recommended to specify explicit widths for the viewport, rather use relative sizes such as percentage.

When checking for the viewport we expect to see the following:

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

And not:

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

How do I fix this ?

To target various screen sizes it is recommended to use the code above. While using the meta tag, @viewport is being added to the CSS standard as part of the CSS Device Adaption specification. While @viewport is being finalized and support may vary, it is recommended to use both methods.

The following terms should be noted:

Initial viewport

This refers to the viewport before any UA (User Agent) or author styles have overridden the viewport given by the window or viewing area of the UA. Note that the initial viewport size will change with the size of the window or viewing area.

Actual viewport

This is the viewport you get after the cascaded viewport descriptors, and the following constraining procedure have been applied.

Procedure for applying CSS rules:

  1. Cascade all @viewport rules using the initial viewport size for values and evaluations which rely on viewport size
  2. Compute the actual viewport from the cascaded viewport descriptors
  3. Cascade all other rules using the actual viewport size

You would be adding the following to your CSS files:

@viewport {
    width: auto;
}

Or

/*The green color should be applied to a div because the initial viewport
width is used to evaluate the media query for the second @viewport rule,
but the actual viewport is used for evaluating the media query when applying style
rules.*/

@viewport {
    width: 397px;
}

@media screen and (width: 397px) {
    @viewport {
        width: 500px;
    }
}

@media screen and (width: 397px) {
    div { color: green; }
}

Resources

Browse another section of the knowledge base



Signup icon
Ready to see how well your site scores?

Passmarked works best when you have an account. It allows you to keep a dashboard with saved data of the sites you have run through the system, we’ll alert you about important updates and you get access to the Passmarked Slack forum.

Sign up to get started