How to Make IFrames Responsive in iOS Safari, Even with Internal Scrollbars?

Making IFrames Responsive in iOS Safari

Problem Description

Integrating content into a website using IFrames requires the IFrames to be responsive. Basic CSS solutions like setting the iframe width to 100% may not suffice. However, achieving responsiveness becomes particularly challenging when the iframe content features internal scroll bars.

Responsive IFrames with Scroll Areas

To make IFrames responsive in iOS Safari, even when the content includes scrolling areas, you have two options:

Option 1: Modify the Content

1. Set the width of the scrollable area (e.g., div#ScrolledArea) in the iframe content to:

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

   Copy after login
2. This forces iOS Safari to resize the iframe properly, allowing the scroll area to function.

Option 2: Modify the iframe

1. If you don't have access to the iframe content, you can apply the following CSS to the iframe itself:

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

   Copy after login

2. However, you must disable scrolling in the iframe by adding scrolling="no" to its HTML:

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

   Copy after login

Note

In option 2, disabling scrolling in the iframe prevents you from using the scroll area in the iframe content. However, if you modify the iframe content (option 1), you can retain the scrolling functionality.

The above is the detailed content of How to Make IFrames Responsive in iOS Safari, Even with Internal Scrollbars?. For more information, please follow other related articles on the PHP Chinese website!