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(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

Javascript在首次运行时调整大小

1 个答案: