将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 $（窗口）.height（），你可以得到的高度，并用$（窗口）.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> 

注意如果你不想全屏幕，你可以像$改变（窗口）.height（） - 50; $（窗口）.WIDTH（） - 50;