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

做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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • AMD 和 CMD 的区别有哪些?AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 ...
    竿牍阅读 780评论 0 1
  • 元素会创建包含另外一个文档的内联框架(即行内框架); 一、align 属性(不赞成) align属性规定ifram...
    puxiaotaoc阅读 20,005评论 0 14
  • 注意:此问题仅才IOS12及之前的版本出现,在IOS13之后已被修复。 解决方式 1、给iframe的外层div添...
    流浪的三鮮餡阅读 694评论 0 0
  • Mobile Web Favorites 参与贡献 移动前端开发收藏夹,欢迎使用Issues以及 Pull Req...
    柴东啊阅读 1,006评论 0 2
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,717评论 0 7

友情链接更多精彩内容