通过 css 将应用程序缩放到 80%

Question

我们使用的是开源应用程序，一切都很好。我唯一不喜欢该产品的是它的布局和文本大小。 如果我放大到 80%（firefox 或 chrome 浏览器），那么应用程序看起来很完美。 由于我们的最终用户不太精通技术，我希望应用程序以 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

这对于 CSS 和/或 JQuery 来说确实是不可能的。 手动浏览器缩放和 CSS zoom 属性的工作方式不同，并且会产生不同的结果。

来源： Changing the browser zoom level

---

替代方案：在页面加载时为用户提供一个模态窗口，指示他们如何手动放大/缩小，在他们成功放大后关闭它。

Answer 2

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

<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 3

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

.class{

变换：比例（0.8）；

}

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