通过css

时间:2015-05-10 13:29:38

标签: css css3 zoom css-transforms

我们正在使用一个开源应用程序,一切都很好。我唯一不喜欢的产品是它的布局&字体大小。 如果我缩放到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中

3 个答案:

答案 0 :(得分:0)

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

left

但是对于桌面,您可以查看此polyfill by Nemo64

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

添加填充后,您可以运行$.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 }); } } }; }

答案 1 :(得分:0)

使用CSS和/或JQuery实际上是不可能的。 手动浏览器缩放和CSS 缩放属性的工作方式不同,会产生不同的结果。

<强>源: Changing the browser zoom level

替代方法:页面加载为用户提供模式窗口,指示他们如何手动放大/缩小,在缩放成功后将其关闭。

答案 2 :(得分:0)

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

的.class {

transform:scale(0.8);

}

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