JS resize事件：視窗重置

在 JavaScript 中，resize 事件是在瀏覽器視窗被重置時觸發的，如當使用者調整視窗大小，或者最大化、最小化、恢復視窗大小顯示時觸發 resize 事件。利用該事件可以跟蹤視窗大小的變化以便動態調整頁面元素的顯示大小。

範例

下面的範例能夠根據跟蹤視窗大小變化及時調整頁面內紅色盒子的大小，使其始終保持與視窗固定比例的大小顯示。

<div id="box"></div>
<script>
    var box = document.getElementById("box");  //獲取盒子的指標參照
    box.style.position = "absolute";  //絕對定位
    box.style.backgroundColor = "red";  //背景色
    box.style.width = w() * 0.8 + "px";  //設定盒子寬度為視窗寬度的0.8倍
    box.style.height = h() * 0.8 + "px";  //設定盒子高度為視窗高度的0.8倍
    window.onresize = function () {  //註冊事件處理常式，動態調整盒子大小
        box.style.width = w() * 0.8 + "px";
        box.style.height = h() * 0.8 + "px";
    }
    function w () {  //獲取視窗寬度
        if (window.innerWidth) {  //相容DOM
            return window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))  //相容IE
            return document.body.clientWidth;
    }
    function h () {  //獲取視窗高度
        if (window.innerHeight) {  //相容DOM
            return window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))  //相容IE
            return document.body.clientHeight;
    }
</script>