javascript - 如何阻止刷新浏览器时重置调整大小的 JavaScript 代码

Question

我有一个响应式 JS 代码，它根据屏幕宽度执行代码。在我的示例代码中，它设置为在屏幕尺寸低于 801px 时运行代码。

我遇到的问题是当屏幕尺寸低于 801px 时。我刷新了页面，代码被重置，就好像屏幕窗口超过 801px 但仍低于 801px。当屏幕窗口移动时，它会自行纠正。

有没有办法解决这个问题，以便刷新浏览器时不会重置？

这是我的 JS 代码:

$(window).resize(function() {
  if ($(window).width() < 801) {
    $(".mejs__currenttime-container,.mejs__duration-container").appendTo(".mejs__group-left");
    $(".mejs__time-rail").insertBefore(".mejs__group-left");
  } else {
    $(".mejs__currenttime-container,.mejs__duration-container").appendTo(".mejs__time-rail");
    $(".mejs__time-rail").insertBefore(".mejs__speed-button");
  }
}).resize();

编辑:这是我的问题的链接 http://wpfreelance.bayoumedia.net/audio/ 。当您将浏览器移动到 801px 以下，点击刷新，然后将浏览器向任意方向移动 1px 时，您就会看到问题。

Answer 1

您应该将调整大小时运行的代码移动到它自己的单独函数中。该函数应该在页面首次加载时运行，它会立即“模拟”调整大小。

resizeWindow(); // call the function immediately when the page loads

$(window).resize(function() {
    resizeWindow(); // also call the function when the page resizes
});

function resizeWindow() {
    if ($(window).width() < 801) {
        $(".mejs__currenttime-container,.mejs__duration-container").appendTo(".mejs__group-left");
        $(".mejs__time-rail").insertBefore(".mejs__group-left");
    } else {
        $(".mejs__currenttime-container,.mejs__duration-container").appendTo(".mejs__time-rail");
        $(".mejs__time-rail").insertBefore(".mejs__speed-button");
    }
}