如何使用 CSS 修復 iOS 裝置上的 Iframe 大小問題？

使用CSS 修復iOS 上的iframe 大小問題

在iOS 裝置上顯示iframe 時，可能會出現不一致的行為，特別是當iframe 內容超出其大小時所分配的框架空間。雖然其他瀏覽器允許溢出滾動，但 iOS 上的 Safari 會意外地調整框架大小以容納多餘的內容。這種與期望行為的偏差可以透過 CSS 修改來解決。

解決方案：

要解決此問題並確保跨裝置的iframe 行為一致，可以使用以下CSS 程式碼補充：

<code class="css">.frame_holder {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}</code>

這裡是修改後的HTML和CSS：

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

<code class="css">body {
  position: relative;
  background: #f0f0f0;
}

.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

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

說明：

新增的CSS樣式引入了兩種重要屬性：

• 溢位：自動；透過根據需要添加捲軸，使父容器能夠容納溢出的內容。
• -webkit-overflow-scrolling: touch;是 iOS 裝置的供應商特定屬性。它確保父容器使用觸控滾動機制，從而允許在 iOS 上平滑滾動。

透過合併這些 CSS 修改，iframe 將保持其指定的尺寸，同時允許在 iOS 上優雅地溢出滾動iOS 裝置。

以上是如何使用 CSS 修復 iOS 裝置上的 Iframe 大小問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！