How to get an IFrame to be responsive in iOS Safari?

by

The solution for this problem is actually quite simple and there are two ways to go about it. If you have control over the Content.html then simply change the div#ScrolledArea width CSS to:

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

Basically the idea here is simple, you set the width to something that is smaller than the viewport (iframe width in this case) and then overwrite it with min-width: 100% to allow for actual width: 100% which iOS Safari by default overwrites. The *width: 100%; is there so the code would remain IE6 compatible, but if you do not care for IE6 you can omit it. Demo

enter image description here
enter image description here

As you can see now, the div#ScrolledArea width is actually 100% and the overflow: scroll; can do it’s thing and hide the overflowing content. If you have access to the iframe content, then this is preferable.

However if you do not have access to the iframe content (for what ever reason) then you can actually use the same technique on the iframe itself. Simply use the same CSS on the iframe:

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

However, there is one limitation with this, you need to turn off the scrollbars with scrolling="no" on the iframe for this to work:

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

If the scrollbars are allowed, then this wont work on the iframe anymore. That said, if you modify the Content.html instead then you can retain the scrolling in the iframe. Demo

More Related Contents:

  1. How to apply CSS to iframe?
  2. HTML iframe – disable scroll
  3. overlay opaque div over youtube iframe
  4. Make Iframe to fit 100% of container’s remaining height
  5. Remove border from IFrame
  6. How to center an iframe horizontally?
  7. Remove scrollbar from iframe
  8. Media queries not working inside an iframe
  9. Two column width 50% css [closed]
  10. One flex/grid item sets the size limit for siblings
  11. How to align content of a div to the bottom
  12. CSS Pseudo-classes with inline styles
  13. Are the decimal places in a CSS width respected?
  14. How to apply a style to an embedded SVG?
  15. How to allow http content within an iframe on a https site [duplicate]
  16. How to keep footer at bottom of screen [duplicate]
  17. How to give the background-image path in CSS?
  18. Bootstrap – 5 column layout
  19. Is there a way to get a web page header/footer printed on every page?
  20. How to implement curve background in CSS? [duplicate]
  21. How to prevent text from overflowing in CSS?
  22. How to darken a background using CSS?
  23. How to keep :active css style after click a button
  24. CSS attribute selector does not work a href
  25. Make a perfect circle around a div of variable height
  26. Font Awesome & Unicode
  27. How to make one span both columns in a two column table?
  28. What is the difference between phrasing content and flow content?
  29. CSS crop string in the middle
  30. What does “semantically correct” mean?

Leave a Comment