将应用程序缩放到 80% css

Question

我们使用的是开源应用程序，一切正常。我唯一不喜欢该产品的是它的布局和文字大小。如果我缩放到 80%（firefox 或 chrome browaer），那么应用程序看起来很完美。由于我们的最终用户不太精通技术，我希望应用程序以 80% 缩放模式打开。

有什么方法可以在 css 或 jQuery 中完成。

下面我试过了

body {
    -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
    zoom: 0.8; /* Other non-webkit browsers */
    zoom: 80%; /* Webkit browsers */
}

但没有帮助...这与在 Firefox 中执行查看 -> 缩放 -> -- 不同

Answer 1

对于移动设备，您可以使用元视口标记来执行此操作。

<meta name="viewport" content="width=device-width, initial-scale=0.8"/>

但是对于台式机，您可以查看此 polyfill by Nemo64。

$.cssNumber.zoom = true;
if (!("zoom" in document.body.style)) {
    $.cssHooks.zoom = {
        get: function(elem, computed, extra) {
            var value = $(elem).data('zoom');
            return value != null ? value : 1;
        },
        set: function(elem, value) {
            var $elem = $(elem);
            var size = { // without margin
                width: $elem.outerWidth(),
                height: $elem.outerWidth()
            };
            $elem.data('zoom', value);
            if (value != 1) {
                $elem.css({
                    transform: 'scale(' + value + ')',
                    marginLeft: (size.width * value - size.width) / 2,
                    marginRight: (size.width * value - size.width) / 2,
                    marginTop: (size.height * value - size.height) / 2,
                    marginBottom: (size.height * value - size.height) / 2
                });
            } else {
                $elem.css({
                    transform: null,
                    margin: null
                });
            }
        }
    };
}

添加 polyfill 后，您可以运行 $.cssHooks.zoom.set("body", 0.8);.

Answer 2

CSSand/orJQuery.确实不可能手动浏览器缩放和 CSS zoom 属性两者的工作方式不同，会产生不同的结果。

来源： Changing the browser zoom level

备选方案： 在页面加载时为用户提供模式 window 指导他们如何手动缩放 in/out，在缩放成功后关闭它。

Answer 3

您是否尝试过使用 css 转换？

.class{

变换：比例（0.8）；

}

这可以在检测浏览器类型和 CSS 媒体查询的 HTML 条件下使用。

将应用程序缩放到 80% css

zoom an application to 80% by css

css

zooming

css-transforms