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">
The problem is that mobile Safari ignores the iframe
width attribute. I created a new question here and answered it myself with the solution: How to set the width of an iframe in iOS6?