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://kswjz.com/article/pjoepe.html

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

行业动态