Why Doesn't My Responsive IFrame Work in iOS Safari?

How to Make an IFrame Responsive in iOS Safari

When incorporating content into a website using an IFrame, it's crucial for the IFrame to retain its responsiveness. While it may seem straightforward to set the IFrame's width to 100% using HTML or CSS, iOS Safari presents unique challenges.

Responsive IFrame with External Scrolling

If the IFrame's content is fully responsive, with no need for internal scrollbars, iOS Safari will automatically resize the IFrame without issues.

Responsive IFrame with Internal Scrolling

However, issues arise when the IFrame content contains horizontal scrolling areas. iOS Safari resizes the IFrame to ensure that these scrolling areas are fully visible, ignoring the overflow settings.

Solutions

To address this problem, there are two solutions:

Modify the IFrame Content:

1. Set the width of the scrolling div within the IFrame's content (e.g., div#ScrolledArea) to:

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

2. This ensures that the div's width is smaller than the IFrame's width but still allows it to occupy 100% of the available space.

Modify the IFrame Element:

1. If you don't have access to the IFrame's content, you can apply the same CSS to the IFrame itself:

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

2. Additionally, disable the scrollbars on the IFrame using the scrolling="no" attribute.

The above is the detailed content of Why Doesn't My Responsive IFrame Work in iOS Safari?. For more information, please follow other related articles on the PHP Chinese website!