如何讓 iFrame 在 iOS Safari 中具有回應能力？

iOS Safari 中的響應式iFrame

在iOS Safari 中使用iFrame 整合內容時，實現回應能力可能具有挑戰性，特別響應能力可能具有挑戰性，特別響應能力是當iFrame 的內容包括水平滾動區域。

iOS 的預設值行為

如果iFrame 的內容完全響應並且可以在不使用內部滾動條的情況下調整其大小，iOS Safari 將相應地調整iFrame 的大小。

溢位問題

但是，新增溢位：捲動到 iFrame 的內容可能會破壞此行為。發生這種情況時，iOS Safari 會自動調整 iFrame 的大小，使溢出的內容可見。

解決方案

• 修改iFrame 內容: 設定溢位的寬度（例如#ScrolledArea） to >

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

  這會強制iOS Safari 遵循min-width值，確保 div 的寬度與 iFrame 的寬度相符。

• 修改iFrame : 如果您無權存取iFrame 的內容，請將相同的CSS 應用於iFrame本身：

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

  要要實現此功能，您必須在iFrame 上使用scrolling="no" 停用捲軸。

透過實作下列解決方案之一，您可以在 iOS Safari 中實作響應式 iFrame，即使其內容涉及水平捲動。

以上是如何讓 iFrame 在 iOS Safari 中具有回應能力？的詳細內容。更多資訊請關注PHP中文網其他相關文章！