移动端中iframe缩放

问题来源于此，需在移动端页面中嵌入iframe页面，如下图。

iframe页面属于PC页面，无视口缩放，而移动端页面有视口缩放

iframe页面受此影响，也会出现放大问题：

    


        取消预约
        重新预约
    

    


     取消预约重新预约

解决以上问题，可考虑引入transform的scale，在iframe加载完成后获取其宽高，并与父元素进行比例换算

let ifr = document.getElementById('iframe')
ifr.onload = function(){
    let wd = ifr.contentWindow.document.documentElement.scrollWidth;
    let ht = ifr.contentWindow.document.documentElement.scrollHeight;
    let x = document.getElementsByClassName('formData')[0].clientWidth / wd;
    ifm.style.width = wd +'px';
    ifm.style.height = ht +'px';
    ifm.style.transform = `scale(${x})`;
    ifm.style.transformOrigin='0 0';
}

出现另外一个问题，

iframe虽然变小了，但实际上的占位并没有改变，真实高度依然达到了1000以上，所以出现很长的滚动条，可以在iframe与父元素中间加入一个容器，用来展示缩小后的iframe，

let ifr = document.getElementById('iframe')
ifr.onload = function(){
    let wd = ifr.contentWindow.document.documentElement.scrollWidth;
    let ht = ifr.contentWindow.document.documentElement.scrollHeight;
    let x = document.getElementsByClassName('formData')[0].clientWidth / wd;
    ifm.style.width = wd +'px';
    ifm.style.height = ht +'px';
    ifm.style.transform = `scale(${x})`;
    ifm.style.transformOrigin='0 0';
    
    document.getElementsByClassName('box')[0].style.height = ht*x + 'px'

}

.formData{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.box{
    width:100%;
    overflow: hidden;
}

如有更好的方法，望赐教