title: @media queries and @viewport zoom
body: <p>I'd like to adjust the viewport zoom (initial-scale) based on the device - a larger zoom on tablets, and a smaller zoom on phone portrait modes.</p>
  <p>I'm able to control the zoom via <code>&lt;meta name=&quot;viewport&quot;...</code> in index.html, but that's not specific to each device.</p>
  <p>Is there not a way to control zoom via @media queries??</p>
  <p>They seem to have no effect.</p>
  <p>I have the following css:</p>
  <pre><code>@media (min-width: 320px) {
    @viewport {
      width: device-width;
      zoom: 0.7;
    }
  }
  
  @media (min-width: 480px) {
    @viewport {
      width: device-width;
      zoom: 0.8;
    }
  }
  
  @media (min-width: 801px) {
    @viewport {
      width: device-width;
      zoom: 1.0;
    }
  }
  </code></pre>
  <p>My understanding is that the first (320px), should be phone portrait mode, the second should be tablet portrait mode, and the third should be tablet landscape.</p>
  <p>In either case, the result is unchanged.</p>
  <p>I'm testing on a Samsung Galaxy Tab E and an htc M8 One phone.</p>