title: Side effects of removing "width=device-width" from viewport meta tag when "initial-scale=1.0" is also set
body: <p>While the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta" rel="noreferrer"><code>&lt;meta name="viewport"&gt;</code></a> tag is unstandardized, it "is respected by most mobile browsers due to de-facto dominance."</p>
  
  <p>One downside of it not being a true web standard is detailed documentation is not as available as other standards. The <a href="https://drafts.csswg.org/css-device-adapt/#viewport-meta" rel="noreferrer">CSS Working Group</a> has a specification for this, so that is what I am mainly using as an authoritative work.</p>
  
  <p>My main question is:</p>
  
  <h2>What would the perceived difference be between the following declarations?</h2>
  
  <pre class="lang-html prettyprint-override"><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;meta name="viewport" content="initial-scale=1.0"&gt;
  </code></pre>
  
  <p>Alternatively asked, what are the differences between these two <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport" rel="noreferrer">@viewport</a> CSS at-rules:</p>
  
  <pre class="lang-css prettyprint-override"><code>/* Translated from &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; */
  @viewport {
      zoom: 1.0;
      min-width: extend-to-zoom;
      max-width: 100vw;
  }
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>/* Translated from &lt;meta name="viewport" content="initial-scale=1.0"&gt; */
  @viewport {
      zoom: 1.0;
      min-width: extend-to-zoom;
      max-width: extend-to-zoom;
  }
  </code></pre>
  
  <hr>
  
  <p>How I arrived at those <code>@viewport</code> translations:</p>
  
  <h3><code>width=device-width</code> to <code>min-width: extend-to-zoom; max-width: 100vw;</code></h3>
  
  <p>The <a href="https://drafts.csswg.org/css-device-adapt/#width-and-height-properties" rel="noreferrer">CSS Device Adaptation Module Level 1 document</a> states:</p>
  
  <blockquote>
    <p>The <code>width</code> and <code>height</code> viewport <code>&lt;META&gt;</code> properties are translated into <code>width</code> and <code>height</code> descriptors, setting the <code>min-width</code>/<code>min-height</code> value to <code>extend-to-zoom</code> and the <code>max-width</code>/<code>max-height</code> value to the length from the viewport.</p>
  </blockquote>
  
  <p>They additionally give an <a href="https://drafts.csswg.org/css-device-adapt/#example-b13db30e" rel="noreferrer">example</a>:</p>
  
  <blockquote>
    <p>This <code>&lt;META&gt;</code> element:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=500, height=600"&gt;
  </code></pre>
    
    <p>translates into:</p>
  
  <pre><code>@viewport {
      width: extend-to-zoom 500px;
      height: extend-to-zoom 600px;
  }
  </code></pre>
  </blockquote>
  
  <p>The <a href="https://drafts.csswg.org/css-device-adapt/#width-desc" rel="noreferrer"><code>width</code> shorthand descriptor</a> is described as:</p>
  
  <blockquote>
    <p>This is a shorthand descriptor for setting both <code>min-width</code> and <code>max-width</code>. One <code>&lt;viewport-length&gt;</code> value will set both <code>min-width</code> and <code>max-width</code> to that value. Two <code>&lt;viewport-length&gt;</code> values will set <code>min-width</code> to the first and <code>max-width</code> to the second.</p>
  </blockquote>
  
  <p>So it stands to reason that <code>width: extend-to-zoom 500px;</code> is equivalent to <code>min-width: extend-to-zoom; max-width: 500px;</code>.</p>
  
  <p>That only leaves the <code>100vw</code> part. Within <a href="https://drafts.csswg.org/css-device-adapt/#width-and-height-properties" rel="noreferrer">section 10.4</a>, they explain:</p>
  
  <blockquote>
    <p><code>device-width</code> and <code>device-height</code> translate to 100vw and 100vh respectively</p>
  </blockquote>
  
  <p>So we can finally see how <code>width=device-width</code> is translated to <code>min-width: extend-to-zoom; max-width: 100vw;</code>.</p>
  
  <h3><code>initial-scale=1.0</code> to <code>zoom: 1.0; width: extend-to-zoom;</code></h3>
  
  <p>This one is a <a href="https://drafts.csswg.org/css-device-adapt/#example-d496fc24" rel="noreferrer">verbatim example</a>:</p>
  
  <blockquote>
    <p>This <code>&lt;META&gt;</code> element:</p>
  
  <pre><code>&lt;meta name="viewport" content="initial-scale=1.0"&gt;
  </code></pre>
    
    <p>translates into:</p>
  
  <pre><code>@viewport {
      zoom: 1.0;
      width: extend-to-zoom;
  }
  </code></pre>
  </blockquote>
  
  <hr>
  
  <p>The other question I have here is, <strong>what <em>exactly</em> is the <code>extend-to-zoom</code> value?</strong></p>
  
  <p>The <a href="https://drafts.csswg.org/css-device-adapt/#extend-to-zoom" rel="noreferrer">documentation on it</a> and its <a href="https://drafts.csswg.org/css-device-adapt/#resolve-extend-to-zoom" rel="noreferrer">resolution procedure</a> are difficult to grasp. If anyone can point me toward some further examples on this that'd be greatly appreciated.</p>
  
  <hr>
  
  <p>In addition to everything above, I've put together a quick site - <a href="https://romellem.github.io/temp-site/viewport/" rel="noreferrer">https://romellem.github.io/temp-site/viewport/</a> - to test some viewport configurations.</p>
  
  <p>Namely:</p>
  
  <ul>
  <li><a href="https://romellem.github.io/temp-site/viewport/width_device-width_initial-scale_1.html" rel="noreferrer">content="width=device-width, initial-scale=1.0"</a></li>
  <li><a href="https://romellem.github.io/temp-site/viewport/initial-scale_1.html" rel="noreferrer">content="initial-scale=1.0"</a></li>
  </ul>
  
  <p>This may help with testing.</p>