0

I'm currently building a site at http://axthehometax.com/ The plugin at the bottom, Rocket Lobby, is loaded via iframe. It works great on desktop, but on mobile, once you click and go through the plugin, it keeps changing the width, and breaking the "mobile" viewport. If you get to the point where you go back in the results it shrinks back down, but it's still a little wider than how it first starts.

I'm not even sure where to start looking for why this is happening. Is it the AX site, or Rocket Lobby, or something wonky with iframe and bootstrap, or..? If it means anything.. the plugin itself, uses jQuery.load to load in new content within the iframe.

Damian Cardona
  • 336
  • 1
  • 13
  • 1
    This is just a good example illustrating why IFRAMEs are an abomination. – Joshua Dannemann Aug 25 '15 at 21:50
  • Do you have any choice with the plug-in to use a different tag? – Joshua Dannemann Aug 25 '15 at 21:56
  • @JoshuaDannemann Well, I made the site for Rocket Lobby, as well. I would have preferred to use something else, but my overall knowledge of cross domain stuff like this limited, and only knew of iframe to work. Initially, I tried just using jQuery.load, but that's when I became acquainted with cross domain policy stuff that didn't allow it to work. – Damian Cardona Aug 25 '15 at 22:08
  • Makes sense. If there is no cross-domain-allow-origin header set then an IFRAME is pretty much your only choice. I think I have an answer for you. – Joshua Dannemann Aug 25 '15 at 22:14
  • @JoshuaDannemann On that note, I tried setting the cross domain stuff, but it just never worked. I'm assuming if that allows it work, and it wasn't, I was doing something wrong, but to my knowledge it was just adding that one line of code. Being relatively inexperienced, maybe I was overlooking something simple? – Damian Cardona Aug 25 '15 at 22:17
  • Open the web page in chrome and look for the call that the IFRAME makes to the other domain under the network tab in the developer's console. What should be absent is an HTTP header under that call that says "cross-domain-allow-origin : * Unless the server has some means of authenticating your domain in order to add that header, then there is nothing you can do. – Joshua Dannemann Aug 25 '15 at 22:31

1 Answers1

0

Constraining an IFRAME in ways that let it render well on pages is not the easiest development task for sure, but as long as you are stuck with having to use one, then there are a few things you can try to have it render well on mobile. Unfortunately, though, there may not be any wrong or right answer to this question.

First, you should explore using the viewport metatag to help instruct mobile browsers how to scale down the page.

<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">

More on that here:

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Second, you do have limited options for using CSS to style an IFRAME, but you can successfully constrain it using a div.

Third, you should explore the suggestions made here on another Stack Overflow thread. As you can see, there are lots of votes on this question, but no accepted answer. You are just going to have to try out a bunch of techniques to see what works best.

how to properly display an iFrame in mobile safari

Community
  • 1
  • 1
Joshua Dannemann
  • 2,003
  • 1
  • 14
  • 34