javascript - 页面加载时的javascript window.onresize

Question

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

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

//Do something

}}

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

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

Answer 1

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

//Do something

}};

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

Answer 2

使用 jquery：

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

Answer 3

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

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