CSS縮放 - 只能讓這個（jQuery）腳本在Chrome中工作

Question

我使用CSS縮放來放大外部容器以匹配高度或寬度（取決於瀏覽器窗口寬高比）。它在Google Chrome中完美運行。我甚至不需要使用'*'選擇器，因爲我認爲CSS縮放屬性會自動縮放所有的孩子。

我似乎無法得到它在Firefox或IE瀏覽器，但（我還沒有嘗試過其他任何瀏覽器

我已經試過「-moz-變換：規模」。在Firefox ...但不能拿到工作無論是。

任何及所有的幫助表示讚賞。謝謝！

$(document).ready(function() { 

var videoAspect= 480/270;/* normalWidth/normalHeight*/ 

var $window = $(window), windowW= $window.width(), windowH= $window.height(); 
var windowAspect= windowW/windowH; 

if(windowAspect > videoAspect){ 
    /* need height of window divided by container height = zoom amount */ 
    $('#wrapper').css({'zoom': windowH/(270*2)}); 


    }else{ 
     /* need width of window divided by container zoom = zoom amount */ 
     $('#wrapper').css({'zoom': windowW/(480*2)}); 

     } 

    }); 

    $(window).resize(function() { 

     var videoAspect= 480/270;/* normalWidth/normalHeight*/ 

     var $win 

dow = $(window), windowW= $window.width(), windowH= $window.height(); 
    var windowAspect= windowW/windowH; 

    if(windowAspect > videoAspect){ 
     /* need height of window divided by container height = zoom amount */ 
     $('#wrapper').css({'zoom': windowH/(270*2)}); 

    }else{ 
     /* need width of window divided by container zoom = zoom amount */ 
     $('#wrapper').css({'zoom': windowW/(480*2)}); 


    } 

}); 

Answer 1

變焦性能並非所有瀏覽器都支持（如你發現）。嘗試也加入transform: scale(%)財產。

您必須包含每個瀏覽器的所有變體，here is a good list of those variants。