如何修復 iOS Safari 上的 Iframe 大小調整問題：一致顯示的解決方法？

iOS 上的iframe 大小：修復Safari 的大小調整異常

在某些情況下，包含過多內容的iframe 可能在iOS 裝置上無法正確顯示。與其他允許內容溢位和捲動的瀏覽器不同，iOS 上的 Safari 會自動調整 iframe 的大小以適合其內容。

這種行為違反了透過 CSS 控制 iframe 大小的意圖。為了解決這個問題並確保跨平台的 iframe 大小一致，有必要實施解決方法。

解決方案：溢出遏制

透過新增具有特定 CSS 的附加 div 元素屬性，您可以強制 iframe 保留其預期尺寸並啟用滾動溢出。以下是修改後的HTML 程式碼：

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

以及對應的CSS：

<code class="css">.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
}

.wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

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

.wrapper div 引入了Overflow: auto;，它可以在包裝div 內實現垂直滾動，並且- webkit-overflow-scrolling: touch;，一個特定於webkit 的屬性，可優化iOS 設備上的滾動性能。

透過此解決方法，iframe 的大小將被保留，從而在 iOS 和 Android 上提供一致且適當的使用者體驗非 iOS 裝置。

以上是如何修復 iOS Safari 上的 Iframe 大小調整問題：一致顯示的解決方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！