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

最新推荐文章于 2023-02-03 11:42:22 发布

caicai1171523597

最新推荐文章于 2023-02-03 11:42:22 发布

阅读量1.2k

点赞数 1

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

版权

做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

caicai1171523597

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
iframe在ios设备宽度超出屏幕解决办法

做h5项目时，使用iframe嵌套一个h5子页面在ios手机上出现超出屏幕的问题。子页面本身是没有超出屏幕的，给iframe；设置了宽度100%没有起作用，在ios手机上为超出屏幕，但是在安卓手机上显示正常。解决办法:给iframe设置属性scrolling=‘no’给iframe设置样式：width: 1px; min-width: 100%; *width: 100%;...
复制链接

扫一扫