我想根據文檔大小製作一個網站縮放。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