做h5项目时,使用iframe嵌套一个h5子页面在ios手机上出现超出屏幕的问题。子页面本身是没有超出屏幕的,给iframe;设置了宽度100%没有起作用,在ios手机上为超出屏幕,但是在安卓手机上显示正常。

解决办法:

给iframe设置属性scrolling=‘no’
给iframe设置样式:width: 1px; min-width: 100%; *width: 100%;

完整代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        iframe {
            width: 1px;
            min-width: 100%;
            *width: 100%;
        }
    </style>
    <script>
        function changeFrameHeight(){
            document.getElementById("iframe").height=0;
            document.getElementById("iframe").height=document.getElementById("iframe").contentWindow.document.body.scrollHeight;
        }
        window.onresize=function(){
            changeFrameHeight();
        }
    </script>
</head>
<body>
<iframe id="iframe" width="100%" src="" onload="changeFrameHeight()"  scrolling="no" frameborder="0"></iframe>
</body>
</html>

原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐