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