javascript - 如何在调整大小时同时获取屏幕宽度和高度？

Question

我有以下脚本，它确实获取屏幕宽度/高度，但只有在页面刷新后才会这样做；

function getWidth(){
    if(self.innerWidth){
        return self.innerWidth; 
    }

    if(document.documentElement && document.documentElement.clientHeight){
        return documentElement.clientWidth; 
    }

    if(document.body){
        return document.body.clientWidth;
    }
}

我想知道是否有其他替代方法可以在浏览时获取屏幕宽度/高度。

Answer 1

正如有人提到的，您可以使用调整大小监听器。这是我在自己的代码中使用的示例:

<script>
        //allow global access to vars height and width, but protect namespace
        var Frame = {width:0,height:0};
        //function to get current height and width
        function getFrameSize() {              
            Frame.height = window.innerHeight;
            Frame.width = window.innerWidth;
        } 
        //set listeners to resize automatically 
        window.addEventListener('resize', getFrameSize);
        window.addEventListener('load', getFrameSize);             
    </script>

这将保持存储在 Frame.height 和 Frame.width 中的窗口内部尺寸的实际高度和宽度，并通过每次调整窗口大小时重新检查来保持值最新。