#### 1、问题描述 五个页面以iframe标签合并成一个页面后，点击F11，页面不能缩放，导致全屏的时候底部出现白色区域 #### 2、问题原因 Iframe标签形成的框架结构隔离内部页面与外部文档，导致内部页面的scale无法响应外部页面尺寸的变化 #### 3、解决方案 在此，要提出解决这个问题的误区，我之前以为要使iframe内部文档响应window.onresize需要再手动设置内部文档的scale属性并且要设置包含它的外部文档中的body节点的scale属性。其实不然，我们只需要修改iframe标签的scale属性就可以了： ```javascript //计算缩放比例，initWidth,initHeight表示窗口变化后的宽高，width,height表示变化前的宽高 var initHeight = window.innerHeight var initWidth = window.innerWidth var x = initWidth / width var y = initHeight / height //设置iframe标签的绽放值 $('iframe').css('webkitTransform', 'scale(' + x + ',' + y + ')') $('iframe').css('msTransform', 'scale(' + x + ',' + y + ')') $('iframe').css('mozTransform', 'scale(' + x + ',' + y + ')') $('iframe').css('oTransform', 'scale(' + x + ',' + y + ')') ```