JavaScript 页面加载时的窗口大小调整事件

Question

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

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

//Do something

}}

当调整浏览器大小时，上述内容完美运行。我的问题是，如果用户在窗口宽度为750的情况下打开页面，如何使上述内容正常工作？

我刚刚测试了一下，显然事件没有被触发，直到浏览器被重新调整大小，这导致上述内容无法正常工作。

- danyo

---

为什么不使用媒体查询呢？ - taylorc93

我也建议使用媒体查询。但是，如果您可以使用像JQuery这样的库，那么这将像$(document).ready(function(){ if (window.innerWidth == 750) { //Do Something }）一样简单。 - Ishikawa91

@taylorc93 - 我需要支持旧版浏览器，这就是为什么。 - danyo

Answer 1

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

//Do something

}};

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

- Lwyrn

Answer 2

使用 jQuery：

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

- Ishikawa91

Answer 3

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

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

- 1nfiniti

---

这样做不会达到我想要的效果，并且会在重新调整大小时执行某些操作。 - danyo

你的点踩只能证明你不理解已经被接受的解决方案 :/ - 1nfiniti

我完全理解你的回答，这也是我接受它的原因。但你忽略了调整大小的元素，这是问题的主要部分。 - danyo

我只是想向您展示如何在onload上使其工作-因为您已经知道如何在onresize上设置它。这是一个非常无聊的理由来downvote一个答案。 - 1nfiniti