我想根据文档大小制作一个网站缩放。Firefox中的css转换缩放问题
所以当文档是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轴上完成,并生成水平滚动。我的html/body标签通常具有100%的宽度,不再适合窗口。所以用户必须滚动水平,并应该是而不是的情况下(在铬一切都很好)。
我在做什么错?
编辑
我现在发现,使得视完整的点进行缩放,而我必须设置HTML标记的宽度下来。所以,而不是100%我不计算宽度与100/newScale
,这是工作正常:)
我想帮助你,但你可以在jsFiddle或类似的东西中提供示例吗? – matox