iphone下iframe问题记录

iframe在手机上展示正好一屏的内容，横向100%，纵向高度固定（例如500px）超出可滚动。

这些问题在Mac上、window上、Android上都是没有的。

这两个问题需要一起说

关于实现滚动

百度一下可以看到很多了

关于宽度溢出

本质是iOS手机内，iframe内页面 display:none 隐藏掉的元素宽度会依然计算在内（文章最后再给个demo吧）。

解决方案：

(1) 对于子页面不可控的情况下 最简单的解决办法

给iframe加上属性 scrolling="no"

页面会自动变得规规矩矩，虽然有 scrolling="no" 属性，在电脑上模拟会无法滑动，但是在iOS手机上会全部铺满，Y轴上可以依赖上面提到的父节点的属性进行滚动。

(2) 子页面可控 *** 作子页面

方法一：html加属性 width:100vw ， 注意给html和body加属性width:100%无效....

方法二：html加属性 width: 1pxmin-width: 100%

子页面不可控的情况下，无解。

可控的情况下，以下面这种布局来写子页面，子页面body下的全部内容全部包裹在#wrap这个dom中。用dom的滚动代替body的滚动。iOS手机下会认为子页面无尺寸。

子页面：

父页面：

在Mac（Chrome）上和Android上一切正常，使用iphone打开，会发现横向边界被截断了。

如果改为 overflow-x: scroll会发现横向可滑动的距离非常长。通过使用Mac Safari调试iphone可见

iframe内页面超出隐藏overflow:hidden元素的宽度也被计算在内了

1、iphone iframe 无法 滚动 滑动

2、使 iframe 在iOS设备上支持滚动

在使用 iframe 或者其他 html 元素时,你需要使用一个元素(如div)来包装他们:

要让 iframe 支持滚动,需要一个常用的CSS属性和一个很少人知道的CSS属性(property):

你是想把视频文件（就是视频所占空间的大小）改小，还是想把画面的尺寸改小？

如果是改视频所占空间的大小，就转成什么3gp、flv那些小视频的格式，但要看你转换后放在什么地方看，所以格式也不能随便转；

如果是想把画面尺寸改小，具体步骤：

打开软件后，选择你要转换的格式，这时候出现一个让你添加视频的界面，界面里有“添加文件”和“输出配置”的选项，你点选“输出配置”，然后在出来的另外的界面里找到“视频流”下面的“屏幕大小”，在“屏幕大小”这行的右边软件默认的是“缺省”，你可以点一下这里，就会出现一个小三角，点小三角就会出来一个下拉单，在这里就可以选择你想要改的画面尺寸。

祝好运！~~~

---