html – How to set the scale of a page

Question:

There is a page on how to do this, if the screen resolution is less than or equal to 1024 , then the page size becomes the same as if we pressed ctrl- (with a scale of 80%)

$(window).on("resize", function () {       
   if( 
         $(window).width()<= 1024
   ){
       /*IF IE9*/
       if (!('querySelector' in document)  //скорее всего ie 9+
          || !('localStorage' in window)  //ie 8+
          || !('addEventListener' in window)  //ie 8 + (возможно)
          || !('matchMedia' in window)) {//ie 10+
          //действия которые должны сработать для IE.

          $("body").css({"zoom":"80%", "padding-left":"20px"}); 
          $(".left_sidebar").css("left","-4px");
       }
       else {
           $("body").css("zoom","80%");    
           $("body").css("-ms-zoom","80%");
       }   
    }
}).resize();

Answer:

The following code will scale the page to 1024px = 100%, assuming the available width is less than 1024. If larger, the page is displayed at a single scale.

https://jsfiddle.net/xgqw5bjo/3/

I draw your attention to the fact that the option using jQuery to set styles does not work, since it processes prefixes itself, and here they need to be controlled manually.

~function () {
  var $window = $(window), $body = $("body");
  var ie = document.documentMode;
  
  function updateSizes() {
    var width = $window.width(), scale = Math.min(width / 1024, 1);

    var style = $body[0].style;
    
    style.msZoom = ie === 8 || ie === 9 ? scale : 1;
    style.zoom = ie === 10 || ie === 11 ? 1 : scale;
    style.mozTransform = "scale(" + scale + ")";
    style.oTransform = "scale(" + scale + ")";
    style.transform = "scale(" + scale + ")";
  }

  $window.resize(updateSizes);
  updateSizes();
}();
html {
  width: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  transform-origin: top left;
}

@supports (transform: scale(1)) {
  body {
    -ms-zoom: 1 !important;
    zoom: 1 !important;
  }
}

div {
  width: 1024px;
  height: 128px;
  background: url(//i.stack.imgur.com/eMSCb.png) repeat-x;
  background: repeating-linear-gradient(to right, blue, red 256px);
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

In theory (not tested) it should work like this:

  • IE 5.5 – 7 zoom
  • IE 8 – 9 -ms-zoom
  • IE 10 – 11 transform & ie

  • Edge 12+ transform & @supports

  • Opera 11.5 – 12.0 -o-transform

  • Opera 12.1 transform

  • Firefox 3.5 – 15 -moz-transform

  • Firefox 16+ transform

  • Firefox 22+ transform ( @supports is @supports , but there is still no zoom )

  • Safari 4 – 8 zoom

  • Safari 9+ transform & @supports (appeared at the same time – lucky)

  • Chrome 4 – 27 zoom

  • Chrome 28 – 35 zoom ( @supports , but no transform yet)
  • Chrome 36+ transform & @supports

If you add -webkit-transform , then there will be support for Safari 3.1 – 3.2, but a lot will break, so better not.

That. for modern browsers the result in one way or another boils down to using transform and destroying zoom . In all very modern and developing ones (Edge, Firefox, Safari, Chrome), as a result, transform & @supports has already turned out , which corresponds to the standard, and therefore, most likely will not break in the future.

Checked in (please add to the list if checking in another browser):

  • IE 11
  • Edge 15
  • Opera 12.18
  • Firefox 50
  • Safari 5 (Win)
  • Safari 10 (Mac)
  • Chrome 54

Browser support details:

PS: In general, it was more correct to make a normal responsive design.

Post Views: 0
Scroll to Top