最初の実行時にJavaScriptのサイズを変更する

Question

ブラウザのサイズを変更すると機能するjavascriptのサイズ変更機能がありますが、特定のサイズでブラウザウィンドウを開始した場合、コンテンツのサイズを変更するにはどうすれば入手できますか？あなたはコードペンhttp://codepen.io/celli/pen/pyMMWeでこれを見ることができます私はブラウザのウィンドウを調整すると私のコンテンツのサイズが変更されます - ただし、小さいサイズ（840pxより小さい）からブラウザでcodePenをリフレッシュすると、コンテンツは "pre"それを実現するためのコードを追加するにはどうすればよいですか？

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(reszEvt); 
$(reszEvt); // Or the below: 
$(document).ready(reszEvt); 

CodePen：

$(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 }); 
} 

をそして与える置き換えhttp://codepen.io/anon/pen/yOmmjo