Javascript在第一次運行時調整

Question

我有一個javascript resize函數，當我調整瀏覽器的大小時，但如何啓動我的瀏覽器窗口以及一定的大小時如何獲取它來調整我的內容？您可以在代碼筆http://codepen.io/celli/pen/pyMMWe中看到此內容，當我們調整瀏覽器窗口時，我的內容將調整大小 - 但是，如果您使用瀏覽器以較小尺寸（小於840px）開始刷新codePen，則內容不會「預先」調整大小。我如何添加代碼來實現這一點？

var maxWidth = $('#outer').width(); 
var maxHeight = $('#outer').height(); 

var windowWidth = $(window).width(); 
var windowHeight = $(window).height(); 

// media query 
var mediaQuery = window.matchMedia("(max-width: 828px)"); 
mediaQuery.addListener(setAnimation); 

// First run 
setAnimation(mediaQuery); 

function setAnimation(mediaQuery) { 
    if (mediaQuery.matches) { 
    // resize func below 
    var maxWidth = $('#outer').width(); 
    var maxHeight = $('#outer').height(); 

    var windowWidth = $(window).width(); 
    var windowHeight = $(window).height(); 

    $(window).resize(function(evt) { 
     var $window = $(window); 
     var width = $window.width(); 
     var height = $window.height(); 
     var scale; 

     // early exit 
     if(width >= windowWidth && height >= windowHeight) { 
     $('#outer').css({'-webkit-transform': ''}); 
     $('#wrappie').css({ width: '', height: '' }); 
     return; 
     } 

     scale = Math.min(width/windowWidth); 

     $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'}); 
     $('#wrappie').css({ width: maxWidth * scale, height: maxHeight * scale }); 
    }); 
    } else { 
    } 
} 

Answer 1

最好的辦法，將其轉換成一個函數。替換：

$(window).resize(function(evt) { 
    var $window = $(window); 
    var width = $window.width(); 
    var height = $window.height(); 
    var scale; 

    // early exit 
    if(width >= windowWidth && height >= windowHeight) { 
    $('#outer').css({'-webkit-transform': ''}); 
    $('#wrappie').css({ width: '', height: '' }); 
    return; 
    } 

    scale = Math.min(width/windowWidth); 

    $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'}); 
    $('#wrappie').css({ width: maxWidth * scale, height: maxHeight * scale }); 
}); 

有了：

function reszEvt(evt) { 
    var $window = $(window); 
    var width = $window.width(); 
    var height = $window.height(); 
    var scale; 

    // early exit 
    if(width >= windowWidth && height >= windowHeight) { 
    $('#outer').css({'-webkit-transform': ''}); 
    $('#wrappie').css({ width: '', height: '' }); 
    return; 
    } 

    scale = Math.min(width/windowWidth); 

    $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'}); 
    $('#wrappie').css({ width: maxWidth * scale, height: maxHeight * scale }); 
} 

並給這兩個：

$(window).resize(reszEvt); 
$(reszEvt); // Or the below: 
$(document).ready(reszEvt); 

CodePen：http://codepen.io/anon/pen/yOmmjo