ios设备使用iframe宽度超出屏幕怎么办
这篇文章主要介绍ios设备使用iframe宽度超出屏幕怎么办,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站设计制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的槐荫网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
场景
在做公司官网h6项目时遇到iframe在苹果X手机上右侧超出屏幕的问题,感觉像是被截断一样,但是在其他手机上显示正常。
分析
问题原因:页面a利用iframe嵌入了b,同时设置iframe的宽度为100% ,但是页面b的实际宽度要大于外层设置的100%。
正常情况下,页面b的显示宽度应该为外层赋予的100%,但是在ios上,当iframe内真实宽度大于外层给予的宽度的时候,显示的宽度则为真实宽度。
解决
1、给iframe的外层div添加样式:overflow: auto;-webkit-overflow-scrolling:touch;width:100%;
2、给iframe设置属性scrolling='no'
3、给iframe设置样式:width: 1px; min-width: 100%; *width: 100%;
附:iframe在IOS里如何自适应宽度?
iframe自动变宽了,在IOS手机上出现滚动条
第一步:定义 iframe 中的scrolling属性为no,设置iframe中不显示滚动条。
第二步:设置iframe的样式为如下所示
iframe{ overflow: scroll; -webkit-overflow-scrolling: touch; min-width: 100%; *width:100%; width:1px; }
以上是“ios设备使用iframe宽度超出屏幕怎么办”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网站名称:ios设备使用iframe宽度超出屏幕怎么办
网站地址:http://ybzwz.com/article/pjoepe.html