It is required to make the site appear as a whole ( 1170 wide ) on all mobile devices. For many platforms, the use of the meta tag has helped.

<meta name="viewport" content="width=1170px"/>

But on the Windows Phone (8.1) platform , the site is still only partially displayed ( on a scale of 100% ). How to force the browser to “squeeze” the page so that it is initially visible as a whole?

  • The problem can be solved with the meta tag <meta name="viewport" content="width=1170px, initial-scale=0.27, maximum-scale=0.27"/> , but this is a very bad solution, since limits the user's ability to scale. - Svetlana
  • I do not know how, but the combination in sss helped: @-ms-viewport { width: 1170px; } @-webkit-viewport { width: 1170px; } @-moz-viewport { width: 1170px; } @-o-viewport { width: 1170px; } @viewport { width: 1170px; } @-ms-viewport { width: 1170px; } @-webkit-viewport { width: 1170px; } @-moz-viewport { width: 1170px; } @-o-viewport { width: 1170px; } @viewport { width: 1170px; } @-ms-viewport { width: 1170px; } @-webkit-viewport { width: 1170px; } @-moz-viewport { width: 1170px; } @-o-viewport { width: 1170px; } @viewport { width: 1170px; } - Svetlana

2 answers 2

And so?

 <meta name="viewport" content="width=1170px, initial-scale=1.0">

  • No, unfortunately, it does not work. - Svetlana
  • And what about this CSS?: @ -Ms-viewport {width: 1170px; } - Bim Bam
  • Also no. And the hack with JS tried - does not help. (maybe the fact is that they are trying to do the opposite everywhere — show the enlarged part of the page right away ?! and therefore the methods do not work from there) - Svetlana
  • I do not know how, but css, similar to the proposed @bim solved the issue. Thank! - Svetlana

Unfortunately, there was no beautiful solution, and I had to excel in the following way:

 <meta name="viewport" content="width=1170px"/> <script type="text/javascript"> if (navigator.userAgent.match(/IEMobile/)) { $('meta[name="viewport"]').attr('content', 'width=1170px, minimum-scale=1'); var wndW = $(window).width(); var docW = $(document).width(); $("html").css({transform: "scale(" + wndW/docW + ")", transformOrigin: "0 0" }); } </script>

If someone offers a more elegant solution, I will be very happy!