javascript - Firefox 中的 css 变换比例问题

Question

我正在尝试根据文档大小制作一个网站。

所以当文档为 0px<1024px 时应该有一个响应式设计。这是 css 媒体查询的直截了当。在 1024px<1950px 的比例上，应显示“正常”设计。这也很容易，这两个维度工作得很好。

现在我想要的是，当文档大于 1950 像素时，比例会上升。因此，例如当屏幕为 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 轴上完成，并生成水平滚动。而我通常具有 100% 宽度的 html/body 标签不再适合窗口。所以用户必须水平滚动，而这应该不是这种情况(在 chrome 中一切都很好)。
我究竟做错了什么？

编辑
我现在发现，完整的视角被缩放了，我必须将 html 标签的宽度设置下来。因此，我不是使用 100%，而是使用 100/newScale 计算宽度，现在工作正常:)

Answer 1

以这种方式更改 CSS 是非常糟糕的做法。你可能想看看 CSS media queries ，您可以在其中以更好的实践和更轻松的方式做到这一点。所有现代浏览器都支持这种响应式缩放方式。