title: Set two different viewports setting via CSS or Javascript
body: <p>I'm trying to set two different viewport settings for different browser widths. </p>
  
  <p>The first viewport setting is for devices wider than 680px width (especially for iPad and desktop devices):</p>
  
  <p><strong></strong></p>
  
  <p>The second viewport for devices under 680px width:</p>
  
  <p><strong></strong></p>
  
  <p>I was trying to solve the viewport width CSS media queries, to be able to ask for the current browser width:</p>
  
  <pre><code>    @media only screen and (min-width: 681px) {
   @viewport {
  width: 1160px;
  }
  }
  
  @media only screen and (max-width: 680px) {
   @viewport {
  width: width=device-width;
   zoom: 1;
  }
  }
  </code></pre>
  
  <p>But it seems, my viewports were ignored by the browser. Someone has an idea, what the problem could be? </p>
  
  <p>Thank you guys!</p>