Home > Web Front-end > CSS Tutorial > Why Doesn't My Responsive IFrame Work in iOS Safari?

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

Patricia Arquette
Release: 2024-12-17 05:55:24
Original
639 people have browsed it

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%;
    Copy after login
  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%;
    }
    Copy after login
  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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template