iOS上使用CSS的iframe大小

Question

有一个iframe，其内容基本上超出了框架的容量。框架的大小基于浏览器的屏幕尺寸，并允许溢出滚动，这在除iOS之外的所有浏览器上均能完美运行。在iOS上，Safari决定调整框架大小以适合内容。不是您所期望的。

HTML：

<div class="frame_holder">
  <iframe class="my_frame">
    // The content
  </iframe>
</div>

CSS：

body {
  position: relative;
  background: #f0f0f0;
}

.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
}

.my_frame {
  width: 100%;
  height: 100%;
  border: 1px solid #e0e0e0;
}

Answer 1

您可以通过添加带有overflow: auto;和的包装div使其工作-webkit-overflow-scrolling:touch;。