How Can I Make Responsive IFrames Work Properly in iOS Safari?

Responsive IFrames in iOS Safari

In the modern web, responsive IFrames are essential for seamless integration of content into websites. While in theory, setting the IFrame's width to 100% should suffice, in practice, this approach may encounter issues in iOS Safari.

Challenges

When an IFrame's content has internal scroll bars, iOS Safari automatically resizes the IFrame to fully display the scrollable area, even if the IFrame width is set to 100%. This behavior can lead to the overflowed content becoming masked.

Solution

To rectify this problem and ensure IFrame responsiveness in iOS Safari, there are two options:

Option 1: Modify IFrame Content

If you control the content within the IFrame, modify the CSS of the div with overflow: scroll to the following:

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

This technique overrides iOS Safari's default behavior and forces the div's width to 100%, allowing the overflow to be hidden.

Option 2: Modify IFrame Itself

If modifying the IFrame content is not feasible, you can apply the same CSS to the IFrame itself:

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

However, this option requires disabling scrollbars on the IFrame using scrolling="no":

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

Conclusion

By following either of the provided solutions, you can ensure that IFrames remain responsive in iOS Safari while accommodating horizontally scrolling areas within their content.

The above is the detailed content of How Can I Make Responsive IFrames Work Properly in iOS Safari?. For more information, please follow other related articles on the PHP Chinese website!