當窗口很小時調整窗口大小，即使窗口寬度較大時也保持不變

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

你可以調整回你在你的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); 
    } 
} 

Answer 2

從窗口寬度只是調整，不僅從#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);