首次运行时调整Javascript大小

Question

我有一个javascript调整大小功能，当我调整浏览器大小时可以使用，但是如果我以一定大小启动浏览器窗口，如何获得它来调整内容大小呢？ 您可以在代码笔中看到此内容http://codepen.io/celli/pen/pyMM我们在调整浏览器窗口时将调整我的内容大小-但是，如果您使用较小的尺寸（小于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