3

So long story short, a client of mine wanted me to build him an ios emulator kind of, and put it on a site. This way, when his clients go to for example, xyz.com, they see an ios shell(a picture with the center cut out of ios phone) and their site inside of that shell. He didnt want any real functionality really, all he wanted was to be able to show his clients what their websites would look like on a mobile device

That said, i figure this should be easy, i take an iframe size it up to the ios mock screen size (320 x 480 etc), put the source to point to the mobile site he already had built, and that's it. Since the mobile site he has already has flexible widths, it should fit nicely........

Problem is that, On the iphone(4s/3gs) and IPAD, the contents of the iframe dont work properly, if at all. The width goes out the window on an ipad/iphone. it behaves like i never set a width for it....and the clicking....non existant within that iframe. They can barely be clicked if at all....can barely scroll etc.

as i did more testing, (on a friends droid phone) and on my Sammy galaxytab 8.9 and 7.1, they display just fine as far as visually but, clicking inside is nonexistent.

Ive googled "iframe problems with ios" and varying queries but nothing specific so i come to the pros.

Just incase you want to see what i mean. heres a working example of what i made...if you look at the code, nothing fancy. literally, an iframe and its source.

Oh and just in case, to test, i changed the source form the mobile site he already got from someone else, and changed it to my port website, and the same thing.

heres the link http://somdowprod.net/4testing/411/index2

My question is, whats the deal with IFRAMEs and mobile devices? Seems i cant get any of them to display what i want the way it behaves on a standard pc.

Ive tested on many different devices/machines and all desktops are fine, behave the way they should. on almost every MOBILE device, its a nogo.

EDIT - The problem seems to be that on IOS specifically, it doesnt accept width/height...after a while, i decided to wrap the iframe in another div, give that the iframes properties, and force an overflow scroll.......it now LOOKS better, i CAN click the buttons, but now the div wont scroll lol.

any tips, links, etc, i appreciate.

Thanks in advance.

Improve this question
0

2 Answers 2

Reset to default
1

It seems you are using html5, look into The 'seamless' Attribute for iframe's (Specifies that the iframe should look like it is a part of the containing document)

http://www.w3schools.com/tags/tag_iframe.asp

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Hello Erik, thanks for your reply. I tried it and still no good. the content height / width still goes to crap not accepting either. Then its like, if i leave as is, it will run but no width/height. If i wrap it in a wrapper div and add width/height /overflow to that, it contains it but then you cant interact with the iframes inner content....Thanks though good try/suggestion
When i was looking i noticed you got 4 other errors atm: 2x404 error, 1 x wrong viewport and a java-script issues. Viewport should be done like this: <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1"> And the java-script(line 48) cant seem to get the header id "header" because it doesn't exist.
Hey Erik, sorry man i took the whole thing down lol, i decided to do it the caveman way and remake the whole thing manually, the client NEEDS it to work on ios/ipad and since iframes are so buggy on mobile devices, it was the only road i had left.
I think that was a good decision on your part, always avoid iframes if possible.
0

I think there is a way to solve this. look here: https://discussions.apple.com/message/19780023#19780023

you may need to also add width and height to the iframe because sometimes it does not work as well for desktops.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.