如何讓 IFrame 在 iOS Safari 中具有回應能力，即使有內部捲軸？

在 iOS Safari 中使 IFrame 具有響應能力

問題描述

使用 IFrame 將內容整合到網站中需要 IFrame 具有回應能力。將 iframe 寬度設定為 100% 等基本 CSS 解決方案可能還不夠。然而，當 iframe 內容具有內部捲軸時，實現回應能力變得特別具有挑戰性。

具有滾動區域的響應式IFrame

要讓IFrame 在iOS Safari 中響應，即使內容包含滾動區域，您也需要有兩個選項：

選項1 ：修改內容

1. 將iframe 內容中可捲動區域（例如div#ScrolledArea）的寬度設定為：

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

2. 這會強制 iOS Safari正確調整 iframe 的大小，使滾動區域發揮作用。

選項2：修改iframe

1. 如果您無權存取iframe內容，可以將下列CSS應用到iframe本身：

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

2. 但是，您必須在iframe中加入scrolling="no" 來停用滾動HTML:

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

注意

在選項2 中，停用iframe 中的捲動會阻止您使用iframe 內容中的滾動區域。但是，如果修改 iframe 內容（選項 1），則可以保留滾動功能。

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