Javascript在第一次运行时调整大小

我有一个javascript调整大小功能，当我调整浏览器大小时可以使用，但是如果我也以一定的大小启动浏览器窗口，如何让它调整我的内容大小呢？您可以在代码笔中看到，当我们调整浏览器窗口时，我的内容将调整大小。但是，如果您使用较小的浏览器（小于840px）刷新代码笔，则内容不会“预”调整大小。我如何添加代码来实现这一点

var maxWidth=$（'#outer'）.width（）；
var maxHeight=$（“#外部”）.height（）；
var windowWidth=$（window.width（）；
var windowHeight=$（window.height（）；
//媒体查询
var mediaQuery=window.matchMedia（（最大宽度：828px））；
addListener（setAnimation）；
//首轮
setAnimation（mediaQuery）；
函数setAnimation（mediaQuery）{
if（mediaQuery.matches）{
//在下面调整func的大小
var maxWidth=$（“#外部”）.width（）；
var maxHeight=$（“#外部”）.height（）；
var windowWidth=$（window.width（）；
var windowHeight=$（window.height（）；
$（窗口）。调整大小（函数（evt）{
变量$window=$（window）；
var width=$window.width（）；
var height=$window.height（）；
var量表；
//提前退出
如果（宽度>=窗口宽度和高度>=窗口高度）{
$（'#outer'）.css（{'-webkit-transform'：'''}）；
$（'#wrappie'）.css（{宽度：''，高度：'}）；
返回；
}
比例=数学最小值（宽度/窗宽）；
$（'#outer'）.css（{'-webkit transform'：'scale（'+scale+'））'）；
$（'#wrappie'）.css（{width:maxWidth*scale，height:maxHeight*scale}）；
});
}否则{
}
}

最好的方法是将其转换为函数。替换：

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

与：

给他们两个：

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

---

代码笔：

最好的方法是将其转换为函数。替换：

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

与：

给他们两个：

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

---

代码笔：

哼，我看不出有什么用。我调整了我的代码笔，但当我在一个小窗口大小（低于840px）下刷新浏览器时，我没有看到结果。。。我希望它调整到窗口宽度，即使我没有积极调整我的浏览器窗口的大小。。。你能用叉子叉我的密码笔，让我知道你是否看到它在工作吗？我能看到它在工作。。。这就是为什么我把它贴出来作为答案<代码>：）是否需要将事件处理程序带到外部？您正在执行

setAnimation（）

对吗？当我像以前一样调整窗口大小时，它会工作，但是如果我以较小的浏览器窗口大小重新加载页面（使用Chrome），比如说500px。。。你得到了水平滚动条，你可以看到它没有调整到我的浏览器窗口的宽度。我在这个代码中有更新的代码。谢谢Praveen，如果我第一次加载页面时窗口宽度小于840px，请告诉我是否有办法。当我调整窗口大小时，它会调整大小，但如果窗口宽度小于840px，它不会确认我第一次加载页面时的窗口大小。嗨，Praveen，我还尝试将整个函数包装在如下函数中：$（窗口）{但是当我第一次加载页面时，我仍然无法让它调整/缩放到窗口，如果页面宽度小于840px…一定有一种简单的方法我找不到了…你能帮我吗？嗯，我看不出这是可行的。我调整了代码笔，但当我以较小的窗口大小（低于840px）刷新浏览器时，我没有看到结果…我希望它能调整到窗口宽度，即使我没有主动调整浏览器窗口的大小…你能用我的代码笔，告诉我你是否看到它工作吗？我能看到它工作…这就是为什么我把它作为一个答案发布。

：）

你可能需要将事件处理程序带到外面吗？你正在执行

setAnimation（）

right？当我像以前一样调整窗口大小时，它会工作，但如果我重新加载页面（在Chrome中）在一个小的浏览器窗口大小，比如说500px…你得到了水平滚动条，你可以看到它没有调整到我的浏览器窗口的宽度。我在这个代码中有更新的代码。谢谢Praveen，如果我第一次加载页面时，如果我的窗口宽度小于840px，请告诉我你有没有办法做到这一点——当我调整我的窗口大小时，它会调整大小窗口，但当我第一次加载页面时，如果窗口宽度小于840px，它不会确认窗口大小。嗨，Praveen，我还尝试将整个函数包装在如下函数中：$（窗口）。on（“加载调整大小”，函数（e）{但是当我第一次加载页面时，我仍然无法让它调整大小/缩放到窗口，如果页面宽度小于840px…一定有一种简单的方法我找不到了…你能帮我吗？