iframe opening full height in iOS - how to avoid that?

Question

I use iframe to embed a widget from my site to the other sites.

This iframe contains several DIVs and one of them (#statements) is usually longer than the max height of iframe that I set up.

When I open it in a browser, it looks fine: http://noduslabs.com/portfolio/hitech-companies/

However, when I hope it on an iPhone / iOS - the iframe height parameter is ignored and I see the full length of the page.

How do I avoid that?

Here's the code I currently use:

<iframe width="100%" height="660" src="http://infranodus.com/seogoogle/seoseo?background=1" frameborder="0" allowfullscreen></iframe>

Thank you!

UPDATE In fact I don't want this iframe to be fixed height of 660, rather – that the user who embeds it could set up any height and that it would work on iOS (so 200 or 1000 - like they want).

djvs · Answer 1 · 2015-03-25T17:19:46.450

0

CSS height is typically preferable to explicit height declarations. In this situation especially because you can also provide a media query.

E.g.:

@media only screen and (max-height:800px){
  .myiframe{
    height:700px;
  }
}

edited Mar 25 '15 at 17:19

answered Mar 25 '15 at 16:51

djvs

552
2
11

so how do i avoid that? – Aerodynamika Mar 25 '15 at 16:51
hm, doesn't work. you sure it's `max-height(800px)` and not something like `max-height:800px`? – Aerodynamika Mar 25 '15 at 16:56

score 0 · Answer 2 · answered Mar 25 '15 at 16:53

0

iframe{
   height:660px;
}

Put that in your css file and it should be done.

answered Mar 25 '15 at 16:53

1GDST

821
1
8
13

Thanks, but what if I want the height to be controllable from the `` code directly? – Aerodynamika Mar 25 '15 at 16:56
Think you wind up using this: http://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent – djvs Mar 25 '15 at 17:20

iframe opening full height in iOS - how to avoid that?

2 Answers2