iframe在ios设备宽度超出屏幕解决办法

最新推荐文章于 2022-06-23 10:12:00 发布

caicai1171523597

最新推荐文章于 2022-06-23 10:12:00 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/caicai1171523597/article/details/105747172

版权

本文介绍了解决在iOS设备上使用iframe嵌套H5页面时遇到的超出屏幕显示问题的方法。通过设置iframe的scrolling属性为'no'及特定CSS样式，如width:1px; min-width:100%; *width:100%，并配合JavaScript调整iframe高度，确保了页面在不同设备上的适配性。

摘要由CSDN通过智能技术生成

做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