javascript代码获取当前电脑页面大小进行缩放控制

紫藤瀑布

于 2024-08-21 02:18:31 发布

阅读量115

点赞数

我整理的一些关于【CRI】的项目学习资料（附讲解～～）和大家一起分享、学习一下：

https://d.51cto.com/xltfov

使用JavaScript获取当前页面大小并进行缩放控制

在现代网页设计中，适应不同设备的屏幕尺寸是一项重要的考虑因素。无论是手机、平板电脑还是桌面电脑，页面能否有效并美观地呈现，直接影响用户的使用体验。为了满足这一需求，开发者常常需要获取当前页面的大小并进行相应的缩放控制。本文将介绍如何使用JavaScript获取当前电脑页面的大小，并根据其大小进行缩放控制。

获取视口大小

首先，我们需要获取浏览器的视口（viewport）大小。在JavaScript中，可以使用 window.innerWidth 和 window.innerHeight 属性来获取当前视口的宽度和高度。以下是一个简单的示例：

function getViewportSize() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    console.log(`当前视口大小: 宽度 = ${width}, 高度 = ${height}`);
    return { width, height };
}

通过这个函数，我们可以在控制台输出当前视口的大小，供后续使用。

进行缩放控制

当我们获取到视口大小后，可以根据这些尺寸对页面进行缩放控制。假设我们希望在视口宽度小于800px时，将页面缩小到75%。我们可以通过CSS的 transform 属性来实现这个缩放效果。

function scalePage() {
    const size = getViewportSize();

    if (size.width < 800) {
        document.body.style.transform = "scale(0.75)";
        document.body.style.transformOrigin = "top left"; // 设定缩放原点
        document.body.style.width = `${size.width}px`; // 重新设置宽度
    } else {
        document.body.style.transform = "scale(1)";
        document.body.style.width = "100%"; // 重置宽度
    }
}

// 监听页面大小变动
window.onresize = scalePage;

// 初始化页面缩放
scalePage();