2016-11-19 99 views
0

我想根据文档大小制作一个网站缩放。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,这是工作正常:)

+0

我想帮助你,但你可以在jsFiddle或类似的东西中提供示例吗? – matox

回答

1

要改变你的CSS这种方式是非常糟糕的做法。你可能想看看CSS media queries,你可以在更好的实践中更轻松地做到这一点。所有现代浏览器都支持这种做响应缩放的方式。

+0

对于媒体查询,我无法进行相同的计算。结果仍然是一样的:在transform:scale()之后,我在firefox中得到了一个水平滚动条,但在chrome中没有。所以我真正的问题就是你还在那里。 – christopher2007

0

JS(jQuery的)可以缩放网页一种不好的做法(等待网站被完全加载,然后改变它的大小?)

使用@media INSEAD:

@media (max-width:1023px) { 
    /* scaled down */ 
    .body {transform: scale (50%); } 
} 

@media (min-width:1024px) and (max-width:1950px) { 

} 
@media (min-width:1951px) { 
    /* scaled up */ 
    .body {transform: scale (200%); } 
} 
+0

使用媒体查询我无法进行相同的计算。结果仍然是一样的:在transform:scale()之后,我在firefox中得到了一个水平滚动条,但在chrome中没有。所以我真正的问题就是你还在那里。 – christopher2007