Question

我正在使用下面的jQuery根据用户的屏幕尺寸在页面上移动一些元素。

我的问题是代码可以正常工作，但仅当您手动调整屏幕大小（即使只有1像素）时，代码才会触发，但文档加载时却永远不会触发？

有什么想法我做错了吗？

Claims

Answer 1

这是因为仅在调整窗口大小时才触发窗口调整大小事件。

如果要执行onLoad函数，可以这样操作：

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函数会在文档加载时和调整窗口大小时触发。

jQuery响应功能在屏幕尺寸更改之前不起作用

1 个答案: