Javascript 当达到最小窗口宽度时触发全高容器

我正在尝试在我的网站上实现一个全高的幻灯片。但是，如果浏览器宽度超过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，则脚本不会启动

---

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

您应该能够在css中通过媒体查询更轻松地解决这个问题

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

---

当浏览器启动时，

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');

---

我理解你的观点，但幻灯片放映后有内容，所以高度：100%不适用于此目的。这就是为什么我要尝试JS的替代方案。啊，当你说“全高”时，我误解了你的意思。我仍然认为你在用js解决css问题，这可能会导致一些讨厌的代码气味。祝你好运。

resize

事件中的代码是在浏览器上还是在开始时只运行一次？@jkris我不确定这个问题，但从我的想法来看，我认为resize触发器应该一直运行，因为每次调整浏览器窗口的大小时，它都会调整div的大小。问题是我只希望.slideshow div是当浏览器宽度超过767时，浏览器的全高，因此我需要“如果”来触发它。对不起，我没有完全阅读您的要求，更新了答案非常感谢您的帮助@jkris。但是，在使用代码时，没有计算高度或将高度应用于.slideshow div。代码中存在语法错误，请更新它。这是if conditionNice上的

（）

，就在那里。当浏览器宽度小于767（好！）时，不会触发任何内容。但如果宽度较大，则触发计算的唯一方法是调整浏览器的大小。换句话说，如果宽度已经是767或更大，它不会自动触发。