Как задать масштаб странице

Следующий код масштабирует страницу до 1024px = 100% при условии, что доступная ширина меньше 1024. Если больше, то страница показывается в единичном масштабе.

https://jsfiddle.net/xgqw5bjo/1/

Обращаю внимание, что вариант с использованием jQuery для задания стилей не работает, поскольку он сам обрабатывает префиксы, а тут их нужно контролировать вручную.

~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: repeating-linear-gradient(to right, blue, red 256px); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div></div>

Теоретически (не проверял) должно работать так:

• 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, но zoom всё равно нет)

• Safari 4 - 8 zoom

• Safari 9+ transform & @supports (появились одновременно - повезло)

• Chrome 4 - 27 zoom

• Chrome 28 - 35 zoom (есть @supports, но ещё нет transform)
• Chrome 36+ transform & @supports

Если добавить -webkit-transform, то появится поддержка Safari 3.1 - 3.2, но многое сломается, так что лучше не надо.

Т. о. для современных браузеров результат тем или иным способом сводится к использованию transform и уничтожению zoom. Во всех совсем современных и развивающися (Edge, Firefox, Safari, Chrome) в итоге уже получилось transform & @supports, что соответствует стандарту, а следовательно, скорее всего не сломается в будущем.

Проверено в (пожалуйста, дополняйте список, если проверяете в другом браузере):

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

Детали по поддержке браузерами:

• http://caniuse.com/#feat=css-zoom
• http://caniuse.com/#feat=css-featurequeries (это про @supports)
• http://caniuse.com/#feat=transforms2d

PS: А вообще, правильнее было сделать нормальный responsive-дизайн.

Ваш код работает когда пользователь сам изменяет масштаб, да и в коде ошибка при указании значения для zoom, он не в процентах, попробуйте так

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

Пример:

$(function () {      
  if($(window).width()<= prompt("Ширина экрана:", "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"); 
    }    
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h2>Header</h2> 
<p>Some text...</p>