使用JS解决PC端页面适配方案

代码正常写，在最下面引入此js代码。完美解决适配问题！代码如下：

const baseWidth = 1920;
const baseHeight = 1080;
let timer = null;
let calcScale = function () {
    let windowInnerWidth = window.innerWidth;
    let windowInnerHeight = window.innerHeight;
    // let ratioW = baseWidth / windowInnerWidth;
    let ratioW = windowInnerWidth / baseWidth;
    // let ratioH = baseHeight / windowInnerHeight;
    let ratioH = windowInnerHeight / baseHeight;
    console.log(windowInnerWidth, windowInnerHeight)
    document.body.style.width = baseWidth + 'px';
    document.body.style.height = baseHeight + 'px';
    document.body.style.transformOrigin = 'left top';
    document.body.style.transform = `scale(${ratioW})`;
}
calcScale();
window.onresize = function () {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(calcScale, 300)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

注意

注：(js代码中有用到css3属性，低版本ie可能不支持)

#JavaScript

上次更新: 2024/01/30, 00:35:17

← 使用js操作浏览器cookie的设置，读取，删除使用js递归生成树形结构→