scale 单屏页面等比自适应缩放

一、说明

本文以body为容器，对内部的box盒子进行比例缩放。

二、html代码

<div id="app" class="box">
    <iframe src="https://www.baidu.com"></iframe>
</div>

三、css代码

<style>
    body,html{height:100%;overflow: hidden;margin: 0;padding: 0;background-color: #272727;}
    .box{
        width:1920px;
        height:1080px;
        transform:scale(1,1);
        transform-origin:left top;
        background-image: url(img/1920-1080.jpg);
        background-repeat: no-repeat;
        background-color: #000;
    }
    .box iframe{
        width:100%;
        height:100%;
        border:none;
    }
</style>

四、脚本代码

<script>
    !function resizeScale(id){
        var dom = document.getElementById(id);
        var domW = dom.clientWidth;
        var domH = dom.clientHeight;
        setScale();
        window.addEventListener('resize',function(){
            setScale();
        },false);
        function setScale(){
            var winW = window.innerWidth,
                winH = window.innerHeight,
                scaleX = winW/domW,
                scaleY = winH/domH;
            dom.style.transform = 'scale('+ scaleX +','+ scaleY +')';
        }
    }('app');
</script>

五、使用说明

只要保证应用环境的比率正常，就可以实现等比例缩放了

转载于:https://www.cnblogs.com/muzhang/articles/10021619.html