Jquery window.resize(event) => {} 适用于检查元素，但不适用于调整 chrome或边缘窗口的大小

编程问答 2022-04-23

问题描述

有很多关于调整大小（事件）无法在线工作的问题，但我只能找到实际反映我的确切问题的 one，但没有答案。

当我使用inspector时，当我的网站到达

我不确定移动版本是否真的可以在移动设备上运行，因为我目前无法进行测试，但我不确定这是否是 Chrome 的正常现象，并且该网站是否可以正常运行在台式机和移动设备上，或者我做错了什么。

相关代码：

$(window).resize((event) => {

      const windowWidth = window.screen.width;
      if (windowWidth <= 540) {

        $('.className1').addClass('d-none');
        $('.classname2').css("width","100%");
        $('.classname3').css("left","3%");
        $('.classname3').css("width","100%");
        $('.classname4').css("width","90%");

这不是整个方法，但它基本上显示了 css 和属性根据窗口宽度下降到 540px 以下而变化的想法。

我尝试了什么：

  • Document.resize（失败）

我真的希望这不是重复的，很难浏览大量的问题。

解决方法

问题不在于 resize 事件或浏览器。发生这种情况是因为您使用的是 window.screen.width，它与屏幕相关，而不是与浏览器窗口相关。调整浏览器窗口的大小没有关系，屏幕宽度不会改变。例如，如果您的屏幕分辨率为 1900x1200，则 screen.width 将始终为 1900。因此，您应该使用 window.innerWidth 或仅使用 innerWidth 来获取视口宽度。要了解更多信息，请参阅this question。

你的代码应该是这样的：

(window).resize((event) => {

  if (innerWidth <= 540) {

    $('.className1').addClass('d-none');
    $('.classname2').css("width","100%");
    $('.classname3').css("left","3%");
    $('.classname3').css("width","100%");
    $('.classname4').css("width","90%");

工作代码示例（在整页中打开代码段并调整其大小）：

  $(window).resize((event) => {
      if (innerWidth <= 540) {
          document.write('It\'s working.');
      }
  });
<html>
    <body>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    </body>
</html>