jQuery innerWidth 减去高度不适用于较小设备上的 'if else'

Question

我可以编写一些代码，允许我在大分辨率和低分辨率设备上设置窗口高度，这允许我使用 Flexbox 将内容居中放置在设备中间。

我正在使用 if (window.innerWidth >= 1023) { 和 } else { 检测较小的屏幕，这在两个主页上都产生了奇迹大的和小的设备。然而 .flexAligner 似乎设置了“高度”但忽略了 - 88，这同样只在非主页页面上开发，即没有 。主页.介绍

我无法理解为什么它不能正常工作，希望有人能指出为什么 - 88 它不能正常工作。我认为这与 Vegas Slider 正在刷新元素而后者没有刷新元素有关。

无效的简短代码段:

} else {
    windowHeight = $(window).innerHeight();
    $('.nanoContainer, .flexAligner, .home .intro').css('min-height', windowHeight - 88);

完整代码在这里:

$(function() {
  $(window).resize(function() {
    if (window.innerWidth >= 1023) {
      windowHeight = $(window).innerHeight();
      $('.nanoContainer, .flexAligner, .vegas-container, .justHeight').css('min-height', windowHeight);
      $("body.home").vegas({
        delay: 8000,
        transition: 'fade',
        transitionDuration: 8e3,
        timer: false,
        slides: [
          { src: "/wp-content/uploads/slide-01-desktop.jpg" },
          { src: "/wp-content/uploads/slide-02-desktop.jpg" },
          { src: "/wp-content/uploads/slide-03-desktop.jpg" }
        ],
        animation: "kenburns"
      });
      $(".home .intro").vegas('destroy');
    } else {
      windowHeight = $(window).innerHeight();
      $('.nanoContainer, .flexAligner, .home .intro').css('min-height', windowHeight - 88);
      $(".home .intro").vegas({
        delay: 8000,
        transition: 'fade',
        transitionDuration: 8e3,
        timer: false,
        cover: false,
        slides: [
          { src: "/wp-content/uploads/slide-01-mobile.jpg" },
          { src: "/wp-content/uploads/slide-02-mobile.jpg" },
          { src: "/wp-content/uploads/slide-03-mobile.jpg" }
        ],
        animation: "fade"
      });
      $("body.home").vegas('destroy');
    }
  }).resize();
});

Answer 1

尝试:

else {
windowHeight = $(window).innerHeight();
$('.nanoContainer, .flexAligner, .home .intro').css('min-height', (windowHeight - 88));

我添加了括号以将 88 与 windowHeight 分组