How to do viewport sizing and scaling for cross browser support?

Question

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).

The mobile browsers that don't seem to support this correctly are:

Windows phone 8 IE10
Android native browser
Android Firefox browser

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):

<meta name="viewport" content="width=620, user-scalable=no" />

I found this question with accepted answer:

Viewport for IE10 & 11 desktop, but not mobile

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.

CSS:

@-webkit-viewport   { width: 620; }
@-moz-viewport      { width: 620; }
@-ms-viewport       { width: 620; }
@-o-viewport        { width: 620; }
@viewport           { width: 620; }

Javascript:

$(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());
});

By the way, user-scalable=no gets ignored as well – Bart Burg Feb 03 '14 at 14:01 — Bart Burg, Feb 03 '14 at 14:01

score 3 · Accepted Answer · edited May 23 '17 at 10:33

As soon as I found out that other browsers had this problem as well, I was able to find better results on the internet.

I have found a solution on at least a part of the question. The viewport sizing seems to work now and we get the correct scale. It still seems I have to accept the fact that with this solution, the user will be able to scale the page manually.

This answer was stripped from a different question:

Trying rendering the viewport meta tag like so:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Setting scale settings will set user restrictions on how far they can zoom, and so if you set the initial and maximum to the same amount, this should fix the problem.

UPDATE: I was able to fix my bug for android devices all together by setting the below:

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

I also noticed that some content, such as p tags were not flowing across the screen, so the hack for that would be to add the background-image property with empty string to any content that is stuck and is not going across the layout view. Hope this helps this time for you.

How to do viewport sizing and scaling for cross browser support?

1 Answers1

Linked