Question

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

我遇到的问题是屏幕尺寸小于801像素。我刷新了页面，代码重置，好像屏幕窗口超过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");
    }
}

如何在刷新broswer时停止重置JavaScript代码的大小

1 个答案: