首页 > 其他 > 详细

前端PC端页面,适配解决方案

时间:2021-04-22 16:22:45      阅读:22      评论:0      收藏:0      [点我收藏+]

代码正常写,在最下面引入此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)
}

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

前端PC端页面,适配解决方案

原文:https://www.cnblogs.com/zy0723/p/14688613.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!