Javascript 在首次运行时调整大小

Question

我有一个 javascript 调整大小功能，当我调整浏览器大小时可以使用，但是如果我也以特定大小启动浏览器窗口，如何让它调整我的内容？您可以在代码笔http://codepen.io/celli/pen/pyMMWe 中看到这一点，当我们调整浏览器窗口时，我的内容将调整大小——但是，如果您使用较小尺寸（小于 840 像素）开始的浏览器刷新代码笔，则内容不会“预先”调整大小.如何添加代码来实现这一点？

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