当达到最小 window 宽度时触发全高容器

Question

我正在尝试在我的网站上实现全高幻灯片。但是，如果浏览器宽度超过 767px，我希望幻灯片显示为全高。

到目前为止，这是我的代码：

if( $(window).width() > 767) {

  $(window).resize(function() {

   var winHeight = $(window).height(); 
   var headerHeight = $(".navbar").height(); 
   $('.slideshow, .slideshow li').height(winHeight);


  });

  $(window).trigger('resize');

}

如果我的浏览器以大于 767 的宽度启动，它有点工作。但是。如果浏览器以小于 767 的宽度开始，而我开始调整大于 767 的宽度，则脚本不会启动。

有什么办法可以解决这个问题吗？

Answer 1

您应该能够在 css 中使用媒体查询更轻松地完成此操作。

@media (min-width:500px){
  .slideshow{
    height:100%;
  }
}

Answer 2

resize 事件处理程序在您的浏览器启动时绑定仅当 width > 767 时，尝试删除 if 条件，它应该可以正常工作

编辑：

要使其仅在宽度 > 767 时应用，条件应在 resize 事件中

$(window).resize(function() {
  if($(window).width() > 767) {
    var winHeight = $(window).height(); 
    var headerHeight = $(".navbar").height(); 
    $('.slideshow, .slideshow li').height(winHeight);
  } else {
    $('.slideshow, .slideshow li').height(400); //initial height
  }
});
$(window).trigger('resize');

当达到最小 window 宽度时触发全高容器

Trigger a full height container when a minimum window width is reached

javascript

jquery

triggers

resize