How to Make iFrames Responsive in iOS Safari?

Responsive iFrames in iOS Safari

When integrating content using iFrames in iOS Safari, achieving responsiveness can be challenging, particularly when the iFrame's content includes horizontal scrolling areas.

iOS's Default Behavior

If the iFrame's content is fully responsive and can adjust its size without using internal scroll bars, iOS Safari will resize the iFrame accordingly.

Overflow Issue

However, adding overflow: scroll to the iFrame's content can disrupt this behavior. When this occurs, iOS Safari will automatically resize the iFrame to make the overflowing content visible.

Solutions

• Modifying the iFrame Content: Set the width of the overflowing div (e.g., #ScrolledArea) to:

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

  This forces iOS Safari to respect the min-width value, ensuring the div's width matches the iFrame's width.

• Modifying the iFrame: If you don't have access to the iFrame's content, apply the same CSS to the iFrame itself:

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

  For this to work, you must disable the scrollbars using scrolling="no" on the iFrame.

By implementing one of these solutions, you can achieve responsive iFrames in iOS Safari, even when their content involves horizontal scrolling.

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