Question

我正在使用tumblr网站并向网页添加元素：http://gcseanswers.co.uk/chemistry

我已嵌入iframe以在页面上显示文档，它在桌面和Android设备上都能正常工作。但是，您无法在ios上滚动iframe。

这是html和css

iframe html

<div class="doc"><iframe src="https://docs.google.com/document/d/1FNsmMKZs-dGmO0Vy3V7AI25kswh6I2EW4UkD0q1EpYE/pub?embedded=true"></iframe></div>

CSS

.doc {
  position: relative;
  height: 500;
  overflow: hidden;
  padding-bottom: 85%;
}


.doc iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

Picture of ios:

请帮助我解决这个问题，非常感谢。

Answer 1

尝试将此添加到您的父iframe CSS规则。那就是我相信的“.doc”。

overflow: auto
-webkit-overflow-scrolling:touch

Answer 2

0）小修复（不是关于你的问题，仅提及）。 CSS“.doc”类（文件化学，第402行）。高度应该是“500px”（你写的只是“500”，这是一个错误）。

1）你的问题怎么样？它是一个旧的iOS Safari漏洞。要使其可滚动，您可以将其添加到“.doc”类：

overflow: auto;
-webkit-overflow-scrolling: touch;

和scrollable="no"到iframe标记本身。

但是这种iframe也会水平滚动（overflow-y无法解决问题，因为iframe只会有更大的宽度）。抱歉，我在这里没有解决方案（我的意思是这是一个应该解决的新问题，我现在无法帮助 - 我的所有尝试都失败了。）

首先，试试这个：How to get an IFrame to be responsive in iOS Safari?（我无法自己测试，因为我需要css文件访问，而不能使用简单的Web Inspector）。

此外，您可以阅读：iframe size with CSS on iOS和此：iframe size on iPad

iOS iframe问题

2 个答案: