Tutorial :Website the wrong width on iPhone on iOS4 when saved to Home Screen


I have a website that looks fine when viewed in Safari on an iPhone. In iOS3.x you can save it as an icon to the Home Screen and it opens fine.

But in iOS4, while it still looks the correct width in Safari, if you open it direct from a Home Screen icon then it's too wide.

I've spent a couple of hours fiddling with various settings of the viewport meta tag, and CSS tweaks, but no joy. Can anyone see what's wrong, or why it would be different in iOS4 vs iOS3?


EDIT: I tested it, and something is definetely wrong. I can't help you here, but it probably has something to do with your CSS.

Original answer:

That's because iPhone automatically saves the current zoom level of the website when you create a web-clip to your home-screen. Make sure you zoom all the way out before creating the web-clip if you don't want this to happen.


I looked at your CSS and you are defining the width a set px. Try using "width:100%" in your divs (wrapper, window, main, etc...) instead of a set px. Of course this means you will have to "recognize" the device and send a different css if its anything other than a webview on the iphone.

For now just test the 100%, if it works then you can start to look at redirecting css depending on device that is viewing the page.

Hope this makes sense, if not let me know.


FYI - this is driving me nuts. My homescreen link worked absolutely fine with vn 3 and now it's broken.

I'm sure this is a bug... will respond if/when I figure out a fix.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »