用 Javascript 取得 Browser 網路瀏覽器視窗大小

可以在<script>區段之中，撰寫這個function去得到browser視窗的size資訊。大家別忘記，網路瀏覽器有各個不同的版本、開發公司。所以，要記得做到兼顧Chrome、Opera、Safari、Firefox、IE...等等的瀏覽器。以下的程式已將各版本的擷取方式一一分出。此function更可以搭配 javascript 中的 window.onresize 偵聽機制去做應用。每當使用者縮放視窗大小之際，都可以擷取到當下的視窗大小尺寸。

視窗size擷取方式：

function alertSize()
{
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) 
{
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} 
else if( document.documentElement && 
                    ( document.documentElement.clientWidth || 
                      document.documentElement.clientHeight ) ) 
{
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} 
else if( document.body && 
                   ( document.body.clientWidth || document.body.clientHeight ) ) 
{
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [ myWidth, myHeight ];
}

與window.onresize應用搭配：

window.onresize = function OnResizeDocument () 
{
var hw_array = alertSize();
....... 其他需要此數值地處理方式。

}

應用還可以更加廣泛。例如：依照特定的視窗大小，可以改變UI呈現的樣子。當然，這在CSS3比較中高段的撰寫上也可以解決。就看各位的需求去做取捨了^ ^。