写一个计算页面可视化范围的方法

在前端开发中，计算页面可视化范围通常指的是获取视口（Viewport）的大小，也就是浏览器窗口内可用于显示网页内容的区域。这通常通过JavaScript的window对象来实现。以下是一个简单的示例方法，用于计算并返回当前页面的可视化范围（宽度和高度）：

function getViewportSize() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    };
}

这个方法首先尝试使用window.innerWidth和window.innerHeight来获取视口的宽度和高度。这两个属性在大多数现代浏览器中都是可用的。但是，为了兼容一些较旧的浏览器，我们还提供了备选方案：document.documentElement.clientWidth、document.documentElement.clientHeight、document.body.clientWidth和document.body.clientHeight。

你可以这样调用这个方法并打印结果：

const viewportSize = getViewportSize();
console.log('Viewport Width:', viewportSize.width);
console.log('Viewport Height:', viewportSize.height);

这段代码将在控制台输出当前视口的宽度和高度。请注意，这些值可能会在用户调整浏览器窗口大小或更改设备方向（例如，从纵向切换到横向）时发生变化。如果你需要在这些情况下更新视口大小，可以监听resize或orientationchange事件，并在事件处理程序中调用getViewportSize方法。