Correct viewport (meta-viewport)

meta-viewport warns against not having a single viewport meta tag in the `` with the proper value.

Why is this important?

The viewport meta tag is an essential part of responsive web design, that may also offer some performance improvements.

> Mobile browsers render pages in a virtual "window" (the viewport), > usually wider than the screen, so they don’t need to squeeze every > page layout into a tiny window (which would break many > non-mobile-optimized sites). Users can pan and zoom to see different > areas of the page. > > Mobile Safari introduced the "viewport meta tag" to let web > developers control the viewport’s size and scale. Many other mobile > browsers now support this tag. > > In recent years, screen resolutions have risen to the size that > individual pixels are hard to distinguish with the human eye. > For example, recent smartphones generally have a 5-inch screens with > resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, > many browsers can display their pages in a smaller physical size by > translating multiple hardware pixels for each CSS "pixel". Initially > this caused usability and readability problems on many touch-optimized > web sites.

Using the viewport meta tag to control layout on mobile devices (MDN)

The viewport related topic is very complex so if you want to dig deeper, read Peter-Paul Koch’s "A tale of two viewports" part one and part two, or watch his talk 'The Mobile Viewports'.

NOTE: If your website is not responsive, then this meta tag might not be needed.

Ideally the following meta viewport tag should be used:

Or, if most of your users don’t use Safari for iOS < 9:

Notes:

• It is recommended to use:

  • width=device-width

    • device-width will make the page match the screen’s width in device-independent pixels, allowing its content to reflow to match different screen sizes.

      Setting the width property to a specific size (e.g.: width=320) is not recommended.

    • Having width=device-width also constitutes a performance improvement, as under most circumstances, it enables fast tapping, removing the 300-350 ms tap delay on Safari for iOS 10+ and other mobile browsers.

  • initial-scale=1

    • This is mostly needed to work around the orientation change bug from Safari for iOS < 9.

    • Using values different then 1 (or 1.0) are problematic.

• user-scalable, maximum-scale, and minimum-scale properties should not be used.

  These properties can block the user from zooming on a page. With such a wide range of devices available with different display dimensions, screen resolutions, pixel densities, etc., it is difficult to choose an appropriate text size in a design. Most of the time using these properties enable users to pick a text size that is unreadable while preventing them from zooming, frustrating them, or making the web site/app inaccessible in some cases.

  Considering the issues described, these properties are now ignored by some mobile browsers such as Safari for iOS 10+.

What does the hint check?

The hint checks if the viewport meta tag was specified a single time in the ``, and if:

• the width property is provided and its value is device-width
• the initial-scale property is provided (note: depends on the configurations) and its value is 1 or 1.0
• user-scalable, maximum-scale, or minimum-scale are used
• it includes unknown properties (e.g.: x=y) or invalid values (width=x)

Examples that trigger the hint

The viewport meta tag is not specified in ``:

    
        
        <title>example</title>
        ...
    
    
        
    

The viewport meta tag contains an unknown property:

The viewport meta tag contains an invalid value:

The viewport meta tag contains a disallowed property (user-scalable):

The viewport meta tag contains a fixed width value:

The viewport meta tag contains initial-scale with a value different than 1 or 1.0:

There are multiple viewport meta tags:

    
        
        <title>example</title>
        
        ...
        
        ...
    
    ...

Examples that pass the hint

If versions of Safari for iOS < 9 are targeted:

    
        
        <title>example</title>
        
        ...
    
    ...

    
        
        <title>example</title>
        
        ...
    
    ...

If versions of Safari for iOS 9+ are targeted:

    
        
        <title>example</title>
        
        ...
    
    ...

Can the hint be configured?

This hint takes into consideration the targeted browsers, and if no versions of Safari for iOS < 9 are included, it will not require initial-scale=1.

How to use this hint?

This package is installed automatically by webhint:

npm install hint --save-dev

To use it, activate it via the .hintrc configuration file:

{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "meta-viewport": "error",
        ...
    },
    "parsers": [...],
    ...
}

Note: The recommended way of running webhint is as a devDependency of your project.

Further Reading

• Peter-Paul Koch - A Tale of Two Viewports - Part 1
• Peter-Paul Koch - A Tale of Two Viewports - Part 2
• Peter-Paul Koch’s meta viewport tests
• New Interaction Behaviors in Safari for iOS 10
• Viewport meta tag specification
• 300ms tap delay, gone away
• Scaling in Safari for iOS