CODEWITHSUNDEEP
ioscssiphoneiframeresponsive-design
watt
watt

Reputation: 879

An iframe is wider than it should on iPhone

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!

Upvotes: 12

Views: 13821

Answers (3)

thhafner
thhafner

Reputation: 101

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

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

Upvotes: 10

watt
watt

Reputation: 879

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?

Upvotes: 4

David Taiaroa
David Taiaroa

Reputation: 25495

For the meta tag try starting with:

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

If that doesn't solve it, look for what's causing the frame to be too wide, e.g. iframe dimension settings, width, padding or margins of elements inside the iframe, as well as margins or padding on the WordPress div that contains the iframe.

Remember that the iframe content is a completely seperate document so you need to double check details in both the parent WordPress page and the iframe page.

Good luck!

edit
You could also check it's not a default browser setting by using a reset in your WordPress CSS, e.g. 

iframe{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
}

Upvotes: 2

Related Questions