css transform scale issue in firefox

Question

Я пытаюсь сделать масштаб веб-сайта на основе размера документа.

Поэтому, когда документ составляет 0px < 1024px, должен быть отзывчивый дизайн. Это продвижение вперед с запросом css media. На шкале 1024px < 1950px должен отображаться «нормальный» дизайн. Кроме того, это довольно легко, и эти два параметра работают очень хорошо.

Теперь я хочу, чтобы, когда документ> 1950px, масштаб растет. Так что, когда, например, экран 2000px, веб-сайт имеет масштаб преобразования (2).

Для этого я пришел с этим маленьким раствором:

$(document).ready(larg); 
$(window).resize(larg); 
function larg(){ 
    var startResizing = 1950; 
    var documentWidth = $(window).width(); 
    console.log("documentWidth: "+documentWidth); 
    if(documentWidth > startResizing){ 
     var scale = (documentWidth - startResizing)/2000; 
     var roundTwoDecimals = Math.round(scale * 100)/100; 
     scale = 1 + roundTwoDecimals; 
     console.log(documentWidth +"-"+ startResizing+"="+(documentWidth - startResizing)); 
     console.log(scale); 

     $("html").css("zoom", scale); // IE 
     $("html").css("-moz-transform", "scale("+scale+")"); // Firefox 
     $("html").css("-moz-transform-origin", "0 0"); 
     $("html").css("-o-transform", "scale("+scale+")"); // Opera 
     $("html").css("-o-transform-origin", "0 0"); 
     $("html").css("-webkit-transform", "scale("+scale+")"); // Safari and Chrome 
     $("html").css("-webkit-transform-origin", "0 0"); 
     $("html").css("transform", "scale("+scale+")"); // Standard Property 
     $("html").css("transform-origin", "0 0"); 
    }else{ // Reset 
     $("html").css("zoom", ""); // IE 
     $("html").css("-moz-transform", ""); // Firefox 
     $("html").css("-moz-transform-origin", ""); 
     $("html").css("-o-transform", ""); // Opera 
     $("html").css("-o-transform-origin", ""); 
     $("html").css("-webkit-transform", ""); // Safari and Chrome 
     $("html").css("-webkit-transform-origin", ""); 
     $("html").css("transform", ""); // Standard Property 
     $("html").css("transform-origin", ""); 
    } 
} 

В Chrome это работает отлично. Но в Firefox есть одна большая проблема:
Масштабирование выполняется также по оси X и генерируется горизонтальная прокрутка. И мой тег html/body, который обычно имеет ширину 100%, больше не подходит в окне. Таким образом, пользователь должен прокручивать по горизонтали и должен быть не корпус (в хроме все в порядке).
Что я делаю неправильно?

EDIT
теперь я узнал, что полная точка зрения масштабируется, и что я должен установить ширину HTML тега вниз. Так что вместо usind 100% я не вычисляю ширину с 100/newScale, и теперь это нормально работает :)

Answer 1

Чтобы изменить ваш CSS, этот способ - действительно плохая практика. Вы можете взглянуть на CSS media queries, где вы можете сделать это лучше и проще. Этот способ выполнения гибкого масштабирования поддерживается во всех современных браузерах.

Answer 2

Js (JQuery) является плохой практикой для масштабирования веб-сайт (ждать сайт, чтобы быть полностью загружен, а затем изменить его размер?)

Использование @media INSEAD:

@media (max-width:1023px) { 
    /* scaled down */ 
    .body {transform: scale (50%); } 
} 

@media (min-width:1024px) and (max-width:1950px) { 

} 
@media (min-width:1951px) { 
    /* scaled up */ 
    .body {transform: scale (200%); } 
}