根据不同分辨率显示相同web页面

最新推荐文章于 2022-10-26 16:19:59 发布

小薇安

最新推荐文章于 2022-10-26 16:19:59 发布

阅读量2.2k

点赞数 1

分类专栏： javascript 文章标签： javascript 分辨率

本文链接：https://blog.csdn.net/WYX15011474269/article/details/78805008

版权

javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<script>

changeSize();

window.onresize = function() {

    changeSize();

};

function changeSize() {

    let newWidth = Number(window.innerWidth);
    let newHeight = Number(window.innerHeight);

    var appBox = document.querySelector('.container');

    if(newWidth > 1920) {

        // appBox.style.left = (newWidth - 1920) / 2 + 'px';
        // //appBox.style.top = (newHeight - 1080)/2 + 'px';
        // appBox.style.top = ((newWidth / 1920 - 1) * 1080) / 2 + 'px';
        appBox.style.transformOrigin = '0 0';
        appBox.style.transform = 'scale(' + newWidth / 1920 + ',' + newWidth / 1920 + ')';
        appBox.style.width = (1920 / newWidth) * 100 + '%';
        appBox.style.height = (1080 / newHeight) * 100 + '%';


    }

    if(newWidth <= 1920) {

        appBox.style.transformOrigin = '0 0';
        appBox.style.transform = 'scale(' + newWidth / 1920 + ',' + newWidth / 1920 + ')';
        appBox.style.width = (1920 / newWidth) * 100 + '%';
        appBox.style.height = (1080 / newHeight) * 100 + '%';

    }

}
</script>