將html元素大小調整為最大瀏覽器大小

Question

您好，我有一個小問題。 不知道如何問這個，但是我希望你能理解我的意思。

我有一個小型網站，上面嵌入了視頻，單擊一個按鈕，我可以在元素的大小之間切換

var small=true;
function toggle()
{
    if(small){
        document.getElementById('frame').width = 1000;
        document.getElementById('frame').height = 600;
        document.getElementById('change').innerHTML = "Smaller!";
        small=false;
    }
    else{
        document.getElementById('frame').width = 640;
        document.getElementById('frame').height = 360;
        document.getElementById('change').innerHTML = "Bigger!";
        small=true;
    }
 }

較小的尺寸始終為640 * 360，這也是默認尺寸，因此我不想對此感到困惑，但是較大的尺寸應根據屏幕尺寸進行調整。 現在，較大的尺寸已經過硬編碼，在我的15英寸筆記本電腦上看起來不錯，但是（當然）在外接顯示器上還不夠大。

所以我的問題是...如何更改此小代碼，以便當用戶單擊按鈕時，它將在640 * 360和當前用戶的最大屏幕尺寸之間切換？ （我不是指全屏顯示，而是最大瀏覽器大小）。

屏幕

s_非常感謝

Answer 1

通過使用jQuery $（window）.height（），您可以獲取高度；使用$（window）.width（），您可以獲取寬度。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
var small=true;
<script language="javascript">
function toggle()
{
    if(small){
        document.getElementById('frame').width = $(window).width();
        document.getElementById('frame').height = $(window).height();
        document.getElementById('change').innerHTML = "Smaller!";
        small=false;
    }
    else{
        document.getElementById('frame').width = 640;
        document.getElementById('frame').height = 360;
        document.getElementById('change').innerHTML = "Bigger!";
        small=true;
    }
 }
</script>

注意如果不想全屏顯示，則可以像$（window）.height（）-50;一樣進行更改。 $（窗口）.WIDTH（） - 50;