iOS 中 h5 页面 iframe 页面样式莫名变大

Question

简单的插入 <iframe /> 并设置宽高后，发现在 Android 手机浏览器上打开可以正常运行，但是在 iOS 手机上会有 iframe 页面样式莫名变大

<div class="common-page about-us-page" id="about-us-page">
    <iframe id="zhx-iframe" frameborder="0"  src="https://m.zbjsaas.com/zhouse"></iframe>
</div>

解决方案：
<iframe scrolling='no' /> 页面正常但是这种方法会导致 iframe 中的 content 显示不全，超出 iframe 高度的部分会直接被裁剪掉。

暂时找不到其他解决方法
目前 document.getElementById('zhx-iframe') 打印出来是空

document.getElementById('zhx-iframe').onload = function(){
    var doc = document.getElementById('zhx-iframe').contentDocument;        
}

如图：

Answer 1

<style>
.about-us-page{overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;position: relative;}
iframe{width: 1px; min-width: 100%; *width: 100%;}
</style>
<script type="text/javascript">
    $(function () {
        //判断电脑端还是手机端
        if(/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
            $('#zhx-iframe').attr('scrolling','no')
        }
        //计算iframe高度
        $('#about-us-page').css({'height':$(window).height()-$('.ui-footer').height(),'width':$(window).width()});
        $('#zhx-iframe').css({'min-height':$(window).height()-$('.ui-footer').height()});
    })
</script>
<!--内容部分-->
<div class="common-page about-us-page" id="about-us-page">
    <iframe id="zhx-iframe" frameborder="0"  width="100%" src="https://m.zbjsaas.com/topic"></iframe>
</div>
<!--内容部分-->

ios系统 添加scrolling=no属性，iframe属性为width: 1px; min-width: 100%; *width: 100%;，iframe外层属性为overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;
此上已实现页面显示正常，但是页面上点击标签跳转到对应位置 功能失效，需要优化iframe内页外层样式，即：
body{position: fixed; width: 100%; height: 100%; overflow: hidden;padding-top: 0;}
.zhouse-page{ height: 100%;overflow-y: scroll;overflow-x: hidden;-webkit-overflow-scrolling:touch;}