在 2 种不同的屏幕尺寸下加载不同的 Javascript 函数答案

【问题标题】：Load Different Javascript Functions at 2 Different Screen Sizes在 2 种不同的屏幕尺寸下加载不同的 Javascript 函数
【发布时间】：2014-08-08 18:50:39
【问题描述】：

我有一个通过 JS 设置高度的 3x3 全屏响应式网格。然后，当您缩小到 800 像素时，我希望网格调整为 2x3。这是不同屏幕尺寸的网格图片：

我通过 CSS 设置了媒体查询，但我还必须更改 div 高度的函数以获取 windowHeight 并将其除以 3 而不是 windowHeight/2 以获得更大的屏幕尺寸。这是必要的JS：

(function() {
  var $serviceBox6 = $('.js-service-box6');
  var $serviceBox5 = $('.js-service-box5');
  var $serviceBox4 = $('.js-service-box4');
  var $serviceBox3 = $('.js-service-box3');
  var $serviceBox2 = $('.js-service-box2');
  var $serviceBox1 = $('.js-service-box1');

  $(document).ready(function() {
      function setHeight() {
        windowHeight = $(window).innerHeight();
        $intro.css('min-height', windowHeight);
        $about.css('min-height', windowHeight);
        $nav.css('min-height', windowHeight);
        $services.css('min-height', windowHeight);
        $contact.css('min-height', windowHeight);
        $contactLeft.css('min-height', windowHeight);
        $contactRight.css('min-height', windowHeight);
        $map.css('min-height', windowHeight);
        $serviceBox1.css('min-height', windowHeight/2);
        $serviceBox2.css('min-height', windowHeight/2);
        $serviceBox3.css('min-height', windowHeight/2);
        $serviceBox4.css('min-height', windowHeight/2);
        $serviceBox5.css('min-height', windowHeight/2);
        $serviceBox6.css('min-height', windowHeight/2);
      };
    setHeight();

    if (document.documentElement.clientWidth <= 800) {
        $(document).ready(function() {
          function setHeight() {
            windowHeight = $(window).innerHeight();
            $contactLeft.css('min-height', windowHeight/2);
            $contactRight.css('min-height', windowHeight/2);
            $map.css('min-height', windowHeight/2);
            $serviceBox1.css('min-height', windowHeight/3);
            $serviceBox2.css('min-height', windowHeight/3);
            $serviceBox3.css('min-height', windowHeight/3);
            $serviceBox4.css('min-height', windowHeight/3);
            $serviceBox5.css('min-height', windowHeight/3);
            $serviceBox6.css('min-height', windowHeight/3);
          };
          setHeight();
        });
    }

    $(window).resize(function() {
      if ($(window).width)

      setHeight();
    });
  });
})();

这在我将屏幕缩小到 800 像素时有效，但如果我将其放大到 800 像素以上，除非刷新页面，否则它不会恢复为 3x3 网格。如果我从 800px 开始，出现 2x3 网格，然后当我将宽度放大，出现 3x3 网格，但如果我缩小到 800px 以下，它不会回到 2x3 网格。当用户调整屏幕宽度低于和高于 800 像素时，如何让网格在两个网格之间重新调整？

非常感谢所有帮助！

【问题讨论】：

通常当我看到在 JS 中指定的大量 CSS 时，我想知道这是否是 min-height: calc(100% / 2) 无法处理的...
我认为这应该是CSS问题，你可以使用Bootstrap网格系统来解决它。那容易得多。 getbootstrap.com/css/#grid
@dandavis 感谢您的帮助。我考虑过删除 JS 并切换到使用 CSS 计算，但担心会缺少浏览器支持，但在查看之后，我唯一需要担心的浏览器似乎是 IE9。如果我无法让 JS 解决方案正常工作，我可能会尝试通过 CSS 计算来解决这个问题。
@LiJunLe 感谢您的意见！实际上，我在本网站即将推出的页面中使用了 Foundations 网格系统，它运行良好，但对于最终网站，我们正在重用以前网站的一些代码，所以这不是一个真正的选择。

标签： javascript jquery responsive-design grid

【解决方案1】：

看起来您在加载文档时正在设置setHeight()。然后，只要宽度低于 800，您就将该函数更改为较小的版本。但是，即使它大于 800，它也永远不会出现您将其更改回来。它只会检查文档是否低于或等于 800，并且当它更改它时。 setHeight() 的较大版本只在开始时分配给该函数。

所以试着在你的第一个 if 语句下面添加这个。

else if (document.documentElement.clientWidth > 800) {
    $(document).ready(function() {
      function setHeight() {
        windowHeight = $(window).innerHeight();
    $intro.css('min-height', windowHeight);
    $about.css('min-height', windowHeight);
    $nav.css('min-height', windowHeight);
    $services.css('min-height', windowHeight);
    $contact.css('min-height', windowHeight);
    $contactLeft.css('min-height', windowHeight);
    $contactRight.css('min-height', windowHeight);
    $map.css('min-height', windowHeight);
    $serviceBox1.css('min-height', windowHeight/2);
    $serviceBox2.css('min-height', windowHeight/2);
    $serviceBox3.css('min-height', windowHeight/2);
    $serviceBox4.css('min-height', windowHeight/2);
    $serviceBox5.css('min-height', windowHeight/2);
    $serviceBox6.css('min-height', windowHeight/2);
      };
      setHeight();
    });
}

【讨论】：

总理您好，感谢您的帮助！我尝试了您的解决方案，如果我将屏幕宽度从 800 像素以下开始并缩放到该宽度以上，它会根据需要进入 3x3 网格。但是，如果我回到 800px 以下，它不会变回 2x2 网格。此外，如果我将屏幕宽度从 800 像素以上开始并缩小到 800 像素以下，它不会切换到 2x2 网格。
啊，是的。我试着在工作日结束时回答，我的大脑有点疲惫。

【解决方案2】：

您的函数嵌套似乎有问题。

function setHeight() {
    windowHeight = $(window).innerHeight();
    $intro.css('min-height', windowHeight);
    $about.css('min-height', windowHeight);
    $nav.css('min-height', windowHeight);
    $services.css('min-height', windowHeight);
    $contact.css('min-height', windowHeight);
    if (document.documentElement.clientWidth <= 800) {
        $contactLeft.css('min-height', windowHeight/2);
        $contactRight.css('min-height', windowHeight/2);
        $map.css('min-height', windowHeight/2);
        $serviceBox1.css('min-height', windowHeight/3);
        $serviceBox2.css('min-height', windowHeight/3);
        $serviceBox3.css('min-height', windowHeight/3);
        $serviceBox4.css('min-height', windowHeight/3);
        $serviceBox5.css('min-height', windowHeight/3);
        $serviceBox6.css('min-height', windowHeight/3);
    } else {
        $contactLeft.css('min-height', windowHeight);
        $contactRight.css('min-height', windowHeight);
        $map.css('min-height', windowHeight);
        $serviceBox1.css('min-height', windowHeight/2);
        $serviceBox2.css('min-height', windowHeight/2);
        $serviceBox3.css('min-height', windowHeight/2);
        $serviceBox4.css('min-height', windowHeight/2);
        $serviceBox5.css('min-height', windowHeight/2);
        $serviceBox6.css('min-height', windowHeight/2);
    }
};

结合其他指针：
您不应该多次调用 ready 函数。您只需拨打第二个电话，它就可以正常工作。
您在 ready 函数之外定义 serviceBox 变量，因此您不能保证它们将具有有效值。仅当您将脚本放在页面底部时，这才能可靠地工作 - 在这种情况下，您首先不需要准备好功能。 :-)

【讨论】：

您好阿罗史密斯，感谢您的帮助！我尝试将

【解决方案3】：

试试这个，注意这是你的 TODO：

$(document).ready(function() {
    var $serviceBox6 = $('.js-service-box6');
    var $serviceBox5 = $('.js-service-box5');
    var $serviceBox4 = $('.js-service-box4');
    var $serviceBox3 = $('.js-service-box3');
    var $serviceBox2 = $('.js-service-box2');
    var $serviceBox1 = $('.js-service-box1');

    function setHeight() {
        var windowHeight = $(window).innerHeight();
        if (windowHeight <= 800) {
            var serviceBoxHeight = windowHeight / 3;
            var mapHeight = windowHeight / 2;
            var contactHeight = windowHeight / 2;
        } else {
            var serviceBoxHeight = windowHeight / 2;
            var mapHeight = windowHeight;
            var contactHeight = windowHeight;
        }

        // TODO modify the following height according to windowHeight
        $intro.css('min-height', windowHeight);
        $about.css('min-height', windowHeight);
        $nav.css('min-height', windowHeight);
        $services.css('min-height', windowHeight);

        $contact.css('min-height', contactHeight);
        $contactLeft.css('min-height', contactHeight);
        $contactRight.css('min-height', contactHeight);
        $map.css('min-height', mapHeight);

        $serviceBox1.css('min-height', serviceBoxHeight);
        $serviceBox2.css('min-height', serviceBoxHeight);
        $serviceBox3.css('min-height', serviceBoxHeight);
        $serviceBox4.css('min-height', serviceBoxHeight);
        $serviceBox5.css('min-height', serviceBoxHeight);
        $serviceBox6.css('min-height', serviceBoxHeight);
    };

    setHeight();
    $(window).resize(function() {
      setHeight();
    });
});

另外，使用min-height CSS 有什么顾虑吗？您可能想直接使用height。

【讨论】：

再次感谢李君乐的帮助！不幸的是，上面的脚本只适用于宽度超过 800 像素的窗口大小。一旦窗口的大小调整到 800px 标记以下，服务框的高度就会与 800px 以上的宽度保持一致。我想我会接受@dandavis 的建议并使用 CSS 计算，因为看起来浏览器支持并没有我想象的那么糟糕。这样我就可以通过 CSS 媒体查询来定位不同的宽度。