扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下ios设备使用iframe宽度超出屏幕如何处理，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
站在用户的角度思考问题，与客户深入沟通，找到唐县网站设计与唐县网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站制作、做网站、企业官网、英文网站、手机端网站、网站推广、主机域名、虚拟空间、企业邮箱。业务覆盖唐县地区。
场景
在做公司官网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%;
附：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宽度超出屏幕如何处理”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网