jQuery响应函数在屏幕大小更改之前不工作

我使用下面的jQuery根据用户的屏幕大小在我的页面上移动一些元素

我遇到的问题是，代码运行良好，但只有当您手动调整屏幕大小时，即使只有1px，它才会触发，但在加载文档时，它不会触发

知道我哪里出错了吗

jQuery(document).ready(function () {

    /*
     * windowSize
     * call this function to get windowSize any time
    */

    function windowSize() {
        windowHeight = window.innerHeight ? window.innerHeight : 
        $(window).height();
        windowWidth = window.innerWidth ? window.innerWidth : $(window).width();      
    }

    //Init Function of init it wherever you like...
    windowSize();

    // For example, get window size on window resize
    $(window).resize(function() {
        windowSize();
        //console.log("width is :", windowWidth, "Height is :", windowHeight);
        if (windowWidth > 1029) {
            $("#single-related").appendTo("#product-team-shop");
        } 
    });        
});

---

这是因为只有在调整窗口大小时才会触发窗口大小调整事件

如果要在加载时执行函数，可以按如下方式执行：

jQuery(document).ready(function () {

  // Function executed once the document is loaded
  windowSize();

  // The function windowSize will execute when the window gets resized
  $(window).resize(function() {
    windowSize();
  });   

  function windowSize() {
    windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
    windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
    // This will make sure it checks the window size once the document is loaded but also whenever a resizeEvent occurs     
    checkWindowWidth();
  }

  function checkWindowWidth() {
    if (windowWidth > 1029) {
        $("#single-related").appendTo("#product-team-shop");
        console.log('resized width greater than 1029');
    }
  }
});

我已将追加和控制台代码放入名为

checkWindowWidth

的函数中。每当调用

windowSize

函数以及每当发生调整大小事件时，我都执行该命令

---

因为

windowSize

函数在文档加载后被调用，这意味着

checkWindowWidth

函数在文档加载和窗口调整大小时被触发。

如果您想在文档准备就绪时触发，您当然只需要将

if

移到windowSize函数中？我相信您必须为该元素编写调整大小的功能，该功能运行良好，谢谢@RamonRobben，也谢谢您的解释。让事情更清楚，下次再说！再次感谢