為什麼我的響應式 IFrame 無法在 iOS Safari 中運作？

如何在iOS Safari 中使IFrame 響應式

使用IFrame 將內容合併到網站中時，IFrame 保留內容至關重要它的響應能力。雖然使用 HTML 或 CSS 將 IFrame 的寬度設為 100% 似乎很簡單，但 iOS Safari 提出了獨特的挑戰。

具有外部滾動的響應式IFrame

如果IFrame內容完全響應式，無需內部滾動條，iOS Safari 將自動調整IFrame 的大小，而無需

具有內部滾動的響應式IFrame

但是，當 IFrame 內容包含水平滾動區域時，就會出現問題。 iOS Safari 調整 IFrame 大小以確保這些滾動區域完全可見，忽略溢出設定。

解決方案

要解決這個問題，有兩種解決方案：

修改IFrame內容：

1. 將IFrame 內容中滾動div 的寬度（例如div#ScrolledArea）設定為：

   width: 1px;
   min-width: 100%;
   *width: 100%;

   登入後複製
2. 此確保div 的寬度小於IFrame 的寬度，但仍允許其佔用100% 的可用空間

修改IFrame元素：

1. 如果您無權訪問IFrame 的內容，您可以應用與IFrame 相同的CSS本身：

   iframe {
       width: 1px;
       min-width: 100%;
       *width: 100%;
   }

   登入後複製
2. 此外，使用scrolling="no"屬性停用IFrame 上的捲軸。

以上是為什麼我的響應式 IFrame 無法在 iOS Safari 中運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！