ios设备使用iframe宽度超出屏幕的解决方法

概述ios设备使用iframe宽度超出屏幕的解决方法 场景 在做公司官网h5项目时遇到iframe在苹果X手机上右侧超出屏幕的问题,感觉像是被截断一样,但是在其他手机上显示正常. 分析 问题原因:页面a利用iframe嵌入了b,同时设置iframe的宽度为100% ,但是页面b的实际宽度要大于外层设置的100%. 正常情况下,页面b的显示宽度应该为外层赋予的100%,但是在ios上,当iframe内真实宽度大于外层给予的宽度的时候,显示的宽度则为真实宽度. 解决 1.给iframe的外层div添加样式:overflow: auto;-webkit-

场景

在做公司官网h5项目时遇到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%;

<div > <iframe height="100%" scrolling="no"  src="https://juejin.im/timeline"> </iframe></div>

附：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宽度超出屏幕的解决方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。