The h5 page iframe page style in iOS is inexplicably larger.

after simply inserting < iframe / > and setting the width and height, it is found that opening it on the Android mobile browser will work normally, but on the iOS phone, the iframe page style will inexplicably become larger

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

solution: the
< iframe scrolling="no" / > page is normal, but this method will result in incomplete display of the content in the iframe, and the parts beyond the height of the iframe will be cut out directly.

No other solution can be found for the time being
currently document.getElementById ("zhx-iframe") print is empty

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

as shown in figure

Html5 css3 ios

Apr.03,2021

<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)) {
            $('-sharpzhx-iframe').attr('scrolling','no')
        }
        //iframe
        $('-sharpabout-us-page').css({'height':$(window).height()-$('.ui-footer').height(),'width':$(window).width()});
        $('-sharpzhx-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 system adds scrolling=no attribute, iframe attribute is width: 1px; min-width: 100%; * width:100%;, iframe outer attribute is overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;
this has realized that the page display is normal, but the function of clicking on the tab to jump to the corresponding location on the page is invalid, so you need to optimize the outer style of the iframe inner page, that is,
body {position: fixed; width:100%;height:100%; overflow: hidden; Padding-top: 0;}
. Zhouse-page {height: 100% cross overflow: scroll;overflow-x: hidden;-webkit-overflow-scrolling:touch;}

Previous: The problem of Recursive menu Generation in js

Next: Vue click to change color

After the transform3D is converted to the back in ios safari, the content on the back is not displayed
problem description transform card 3D conversion, with content An on the front and content B on the back. The ideal result is that content A disappears and content B displays after the card is flipped. chrome is normal. Content A disappears after car...

Css html5 css3 ios safari

Jun.20,2022