页面加载时的javascript window.onresize答案

【问题标题】：javascript window.onresize on page load页面加载时的javascript window.onresize
【发布时间】：2013-07-31 15:59:41
【问题描述】：

我有一个脚本，它根据屏幕大小显示不同的内容，它看起来像这样：

window.onresize = function(event) {
if ((window.innerWidth > 750 && window.innerWidth < 1250))  {

//Do something

}}

在重新调整浏览器大小时，上述内容绝对可以正常工作。我的问题是，如果用户以 750 的窗口宽度打开页面，我如何才能使上述工作正常工作？

我刚刚对此进行了测试，显然在调整浏览器大小之前不会触发事件，这导致上述方法不起作用

【问题讨论】：

为什么不使用媒体查询呢？
我也会推荐媒体查询。但是，如果您可以使用 JQuery 之类的库，这将像 $(document).ready(function(){ if (window.innerWidth == 750) { //Do Something } 一样简单
@taylorc93 - 我需要支持旧版浏览器，这就是原因

标签： javascript window

【解决方案1】：

var onResizing = function(event) {
if ((window.innerWidth > 750 && window.innerWidth < 1250))  {

//Do something

}};

window.onresize = onResizing;
window.onload = onResizing;

【讨论】：

【解决方案2】：

使用 jquery：

$(document).ready( function(){
   if (window.innerWidth == 750) {
     // Do something
   } 
});

【讨论】：

【解决方案3】：

“onresize”函数是一个在用户调整页面大小时触发的事件监听器。要让您的代码在页面加载时运行，您需要将其设置为在页面加载事件上触发（因为页面加载事件是与调整大小事件不同的事件）。

window.onload = function(event) {
    if ((window.innerWidth > 750 && window.innerWidth < 1250))  {
        //Do something
    }
}

【讨论】：

这不会做我打算做的事情并在调整大小时做一些事情
您对此投反对票的事实只是证明您不了解公认的解决方案：/
我完全理解答案，这就是我接受它的原因。您错过了调整大小的元素，这是问题的主要部分。
我只是想向您展示如何让它在负载上工作 - 因为您已经知道如何设置它 onresize。对答案投反对票的理由很蹩脚。