如何使響應式 IFrame 在 iOS Safari 中正常運作？

iOS Safari 中的響應式IFrame

在現代網路中，響應式IFrame 對於將內容無縫整合到網站中至關重要。理論上，將 IFrame 的寬度設為 100% 就足夠了，但實際上，這種方法可能會在 iOS Safari 中遇到問題。

挑戰

當IFrame 的內容有內部滾動條，iOS Safari 會自動調整IFrame 的大小以完全顯示可滾動區域，即使IFrame 寬度設定為100% 。此行為可能會導致溢出的內容被遮蓋。

解決方案

要修正此問題並確保iOS Safari 中的IFrame 回應能力，有兩個選項：

選項11 ：修改IFrame內容

如果您控制IFrame 中的內容，請修改div的 CSS 並使其溢出：捲動到以下內容：

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

此技術會覆蓋 iOS Safari 的預設行為，並且強制 div 的寬度為 100%，從而隱藏溢出。

選項2：修改IFrame本身

如果修改IFrame 內容不可行，您可以將相同的CSS 應用到IFrame 本身：

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

但是，此選項需要使用以下命令停用IFrame上的滾動條scrolling="no":

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

結論

透過遵循提供的任一解決方案，您可以確保IFrame 在iOS Safari 中保持響應，同時適應水平滾動內容中的區域。

以上是如何使響應式 IFrame 在 iOS Safari 中正常運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！