ios设备使用iframe宽度超出屏幕如何处理-创新互联

小编给大家分享一下ios设备使用iframe宽度超出屏幕如何处理，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

成都创新互联公司是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的10余年时间我们累计服务了上千家以及全国政企客户，如小搅拌车等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞扬。

场景

在做公司官网h6项目时遇到iframe在苹果X手机上右侧超出屏幕的问题，感觉像是被截断一样，但是在其他手机上显示正常。

分析

问题原因：页面a利用iframe嵌入了b，同时设置iframe的宽度为100% ，但是页面b的实际宽度要大于外层设置的100%。正常情况下，页面b的显示宽度应该为外层赋予的100%，但是在ios上，当iframe内真实宽度大于外层给予的宽度的时候，显示的宽度则为真实宽度。

解决

1、给iframe的外层p添加样式：overflow: auto;-webkit-overflow-scrolling:touch;width:100%;

2、给iframe设置属性scrolling='no'

3、给iframe设置样式：width: 1px; min-width: 100%; *width: 100%;

<p > <iframe height="100%" scrolling="no"  src="/tupian/20230522/ </iframe></p>

附：iframe在IOS里如何自适应宽度？

iframe自动变宽了，在IOS手机上出现滚动条

第一步：定义 iframe 中的scrolling属性为no，设置iframe中不显示滚动条。

<iframe scrolling="no" ></iframe>

第二步：设置iframe的样式为如下所示

iframe{  overflow: scroll;  -webkit-overflow-scrolling: touch;  min-width: 100%;  *width:100%;  width:1px;}

看完了这篇文章，相信你对“ios设备使用iframe宽度超出屏幕如何处理”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

分享标题：ios设备使用iframe宽度超出屏幕如何处理-创新互联
分享链接：https://www.cdcxhl.com/article16/dgghdg.html

成都网站建设公司_创新互联，为您提供商城网站、标签优化、企业网站制作、定制开发、自适应网站、虚拟主机

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联