移动端中iframe缩放 HTML

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

文章图片

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

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

文章图片

解决以上问题，可考虑引入transform的scale，在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'; }

出现另外一个问题，

文章图片

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'}