htmlcssviewportmeta-tags

Side effects of removing "width=device-width" from viewport meta tag when "initial-scale=1.0" is also set

While the <meta name="viewport"> tag is unstandardized, it "is respected by most mobile browsers due to de-facto dominance."

One downside of it not being a true web standard is detailed documentation is not as available as other standards. The CSS Working Group has a specification for this, so that is what I am mainly using as an authoritative work.

What would the perceived difference be between the following declarations?

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

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

Alternatively asked, what are the differences between these two @viewport CSS at-rules:

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

How I arrived at those @viewport translations:

width=device-width to min-width: extend-to-zoom; max-width: 100vw;

The CSS Device Adaptation Module Level 1 document states:

The width and height viewport <META> properties are translated into width and height descriptors, setting the min-width/min-height value to extend-to-zoom and the max-width/max-height value to the length from the viewport.

They additionally give an example:

This <META> element:

<meta name="viewport" content="width=500, height=600">

translates into:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

The width shorthand descriptor is described as:

This is a shorthand descriptor for setting both min-width and max-width. One <viewport-length> value will set both min-width and max-width to that value. Two <viewport-length> values will set min-width to the first and max-width to the second.

So it stands to reason that width: extend-to-zoom 500px; is equivalent to min-width: extend-to-zoom; max-width: 500px;.

That only leaves the 100vw part. Within section 10.4, they explain:

device-width and device-height translate to 100vw and 100vh respectively

So we can finally see how width=device-width is translated to min-width: extend-to-zoom; max-width: 100vw;.

initial-scale=1.0 to zoom: 1.0; width: extend-to-zoom;

This one is a verbatim example:

This <META> element:

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

translates into:

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

The other question I have here is, what exactly is the extend-to-zoom value?

The documentation on it and its resolution procedure are difficult to grasp. If anyone can point me toward some further examples on this that'd be greatly appreciated.

In addition to everything above, I've put together a quick site - https://romellem.github.io/temp-site/viewport/ - to test some viewport configurations.

Namely:

Solution

  • Before we delve into what you're asking, let's review a little about why the viewport meta tag exists in the first place. Here's what I've gathered.

    Why do we need the viewport tag?

    A viewport is an area where the web content can be seen. Usually, the rendered page (web content) is bigger than the viewport. As a result, we usually use scrollbars to see the hidden content (because the viewport can't display everything). Quoted from CSS Device Adaptation Module Level 1:

    The narrow viewport is a problem for documents designed to look good in desktop browsers. The result is that mobile browser vendors use a fixed initial containing block size that is different from the viewport size, and close to that of a typical desktop browser window. In addition to scrolling or panning, zooming is often used to change between an overview of the document and zoom in on particular areas of the document to read and interact with.

    In mobile devices (and other smaller devices), the initial containing block is usually larger than the viewport. For example, a mobile device that has a screen width of 640px might have an initial containing block of 980px. In this case, the initial containing block is shrunk to 640px so that it can be fit into the mobile screen. This 640px width (screen width) is what is called initial-width of the viewport which will be pertinent to our discussion.

    So.... Why do we need this viewport tag? Well, nowadays, we have media queries which allows us to design for mobile devices. However, this media query depends on the actual viewport's width. In mobile devices, the user agent automatically styles the initial viewport size to a different fixed one (usually larger than the initial viewport size). So if the viewport's width of a mobile device is fixed, the CSS rules we use in media queries won't be executed simply because the viewport's width never changes. Using the viewport tag, we can control the actual viewport's width (after being styled by the UA). Quoted from MDN:

    However, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.

    Note that the viewport tag can change the actual viewport's height too, not just the width

    viewport tag's width

    The width in a viewport tag is translated to max-width in the @viewport rule. When you declare the width as device-width, it is translated to 100% in the @viewport rule. Percentage value is resolved based on the initial-width of the viewport. So if we're still using the above example, the max-width will resolve to a value of 640px. As you've found out, this only specifies the max-width. The min-width will automatically be extend-to-zoom.

    extend-to-zoom

    Your question was what exactly is the value of extend-to-zoom? From what I've gathered, it's the value that's used to support the viewport extending itself to fit the viewing area at a given zoom level. In other words, it's a viewport size value that changes based on the zooming value specified. An example? Given that the max-zoom value of the UA stylesheet is 5.0 and the initial-width is 320px, <meta name="viewport" content="width=10"> will resolve to an initial actual width of 64px. This makes sense because if a device only has 320px and can only be zoomed 5x the normal value, then the minimum viewport size would be 320px divided by 5, which means showing only 64px at a time (and not 10px because that would require zooming 32x!). This value will be used by the algorithm to determine how to extend (change) the min-width and max-width values, which will play a role in determining the actual viewport width.

    Putting it all together

    So essentially, what's the difference between <meta name="viewport" content="width=device-width, initial-scale=1.0"> and <meta name="viewport" content="initial-scale=1.0">? Simply redo the steps of the algorithm (this and this). Let's do the latter (the one without width attribute) first. (We will assume that the initial-width of the viewport is 640px.)

    Let's do the former.

    So what's the perceived difference? Essentially none. Both of them do the same thing. Hope my explanation helps ;-) If anything was amiss, do tell me.