Question

对于模棱两可的标题感到抱歉，我不确定应该使用什么。我想根据窗口大小调整播放器（Javascript）的大小，以使其响应。标准宽度为620px，如果宽度小于我想要的宽度，则组件的宽度应为100%。我使用jQuery添加了一个事件监听器。但是，问题是当窗口大小小于620时，播放器的组件宽度变为100%，并且即使窗口大小随后变大，它仍保持为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);
   }
}

窗口小时窗口调整大小，窗口宽度越大，窗口保持相同

2 个答案: