如何修復 iOS Safari 中的 IFrame 回應問題？

解決iOS Safari 中的IFrame 回應問題

使用IFrame 將外部內容整合到網站中通常會給在現代裝置上保持回應能力帶來挑戰。這個問題在 iOS Safari 中尤其明顯，其中 IFrame 可能無法完全調整其大小。

要解決這個問題，我們必須先了解根本原因。當 IFrame 內容擁有內部捲軸時，iOS Safari 瀏覽器會自動調整 IFrame 的大小以容納捲軸的全部內容。這種行為與所需的反應能力相矛盾。

解

有兩種有效的方法可以解決此問題：

1.修改IFrame 內容

1.修改IFrame 內容

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

如果您可以控制嵌入的IFrame 的內容（即Content.html），則可以修改滾動區域（div#ScrolledArea）的 CSS：

此 CSS 設定最小寬度，確保 IFrame 永遠不會超過視窗寬度。 min-width 和 *width 值會覆寫 iOS Safari 的預設行為。

2.修改IFrame 元素

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

如果無法存取IFrame 內容，可以操作IFrame 元素本身：

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

但是，此方法需要在元素本身：

但是，此方法需要在IFrame上停用捲軸使用scrolling="no"屬性：雖然停用捲軸是必要的，但修改IFrame 內容仍然是在 IFrame 內保留滾動條的首選解決方案。 兩個解決方案都確保 IFrame 的寬度具有響應性，並且滾動區域按預期運行。

以上是如何修復 iOS Safari 中的 IFrame 回應問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！