Firefox中的css轉換縮放問題

我想根據文檔大小製作一個網站縮放。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，這是工作正常:)

來源

2016-11-19 christopher2007

我想幫助你，但你可以在jsFiddle或類似的東西中提供示例嗎？ – matox

要改變你的CSS這種方式是非常糟糕的做法。你可能想看看CSS media queries，你可以在更好的實踐中更輕鬆地做到這一點。所有現代瀏覽器都支持這種做響應縮放的方式。

來源

2016-11-19 14:19:43

對於媒體查詢，我無法進行相同的計算。結果仍然是一樣的：在transform：scale（）之後，我在firefox中得到了一個水平滾動條，但在chrome中沒有。所以我真正的問題就是你還在那裏。 – christopher2007

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%); } 
}

來源

2016-11-19 14:26:11

使用媒體查詢我無法進行相同的計算。結果仍然是一樣的：在transform：scale（）之後，我在firefox中得到了一個水平滾動條，但在chrome中沒有。所以我真正的問題就是你還在那裏。 – christopher2007

Firefox中的css轉換縮放問題

回答

相關問題