An iframe is wider than it should on iPhone

Question

I have an iframe that I am embedding into a responsive WordPress theme. It looks good on some mobile devices, but on iPhone, the iframe is a bit wider than it should and it gets out of the container so users can't see the right part of the iframe (which is probably around 20-30px). This happens on portrait mode - if the orientation is set on landscape, it looks ok.

The content of the iframe is responsive as well, I'm using bootstrap. Also it looks ok on resized desktop browsers and on Android mobile devices. So the problem is only with the portrait iPhone orientation.

I am using this in the head of my iframe:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Any ideas?

Thank you!

Answer 1

Mobile Safari seems to not recognize width attributes on iframe, but recognizes min-width.

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