javascript - 窗口较小时调整窗口大小，即使窗口宽度较大也保持不变

Question

抱歉标题模棱两可，不确定我应该使用什么。我想根据窗口大小调整播放器（Javascript）的大小，以使其具有响应性。标准宽度是620px，如果宽度小于我希望组件的宽度应该是100%。我使用 jQuery 添加了一个事件侦听器。100%但是，问题是当窗口大小小于 620 时播放器的组件宽度变为，并且即使之后窗口大小变得更大，它仍然保持为 100%。这是我的代码。

function resizeVideo() {
  var width = $('#slideshow').width();
    if(width < 620) {
      $('#object').width('100%');
      $('#object #background').width('100%');
      $('#object #slide_area').width('100%');
      $('#object #controls').width('100%');
      // alert("here");
    }
    else {

    }
  }
resizeVideo();
window.addEventListener("resize", resizeVideo, false);

Answer 1

只需从窗口宽度调整大小，而不仅仅是#slideshow：

function resizeVideo() {
    var width = $(window).width();
    if(width < 620) {
        //Resize to 100%
        $('#object, #background, #slide_area, #controls').width('100%');
    } else {
        //Resize back to normal value
        $('#object, #background, #slide_area, #controls').width(620);
    }
}

作为听众，我会用 jQuery 做这样的事情：

$(window).on('resize', resizeVideo);

Answer 2

你可以在你的 else 语句中调整回原来的宽度（假设你原来的宽度是 620：

function resizeVideo() {
   var width = $('#slideshow').width();
   if(width < 620) {
     $('#object').width('100%');
     $('#object #background').width('100%');
     $('#object #slide_area').width('100%');
     $('#object #controls').width('100%');
   } else {
     $('#object').width(620);
     $('#object #background').width(620);
     $('#object #slide_area').width(620);
     $('#object #controls').width(620);
   }
}