title: How to do viewport sizing and scaling for cross browser support?
body: <p>Basically what I'm trying to do is get my viewport width the same on all mobile browsers and make sure the user cannot zoom in or out (scale).</p>
  
  <p>The mobile browsers that don't seem to support this correctly are: </p>
  
  <ul>
  <li>Windows phone 8 IE10</li>
  <li>Android native browser</li>
  <li>Android Firefox browser</li>
  </ul>
  
  <p>The following line of code works on all mobile browsers except the one from the company that rejects standards as usual (IE, in this case IE10 Mobile):</p>
  
  <pre><code>&lt;meta name="viewport" content="width=620, user-scalable=no" /&gt;
  </code></pre>
  
  <p>I found this question with accepted answer:</p>
  
  <p><a href="https://stackoverflow.com/questions/19659053/viewport-for-ie10-11-desktop-but-not-mobile">Viewport for IE10 &amp; 11 desktop, but not mobile</a></p>
  
  <p>After applying the below css and javascript code, it still keeps the viewport as device-width instead of the 620 I'm trying to achieve.</p>
  
  <p>CSS:</p>
  
  <pre><code>@-webkit-viewport   { width: 620; }
  @-moz-viewport      { width: 620; }
  @-ms-viewport       { width: 620; }
  @-o-viewport        { width: 620; }
  @viewport           { width: 620; }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(function(){
      if (navigator.userAgent.match(/IEMobile\/10\.0/) || navigator.userAgent.match(/IEMobile\/11\.0/)) {
        var msViewportStyle = document.createElement("style")
          msViewportStyle.appendChild(
          document.createTextNode(
            "@-ms-viewport{width:auto!important}"
          )
        )
        document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
      }
  
      alert($(window).width());
  });
  </code></pre>