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

views:

153

answers:

+2 Q:

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.

Emil 2010-06-22 15:50:56

Thanks for looking Emil. Strange that it seems to work fine in iOS3, and that it looks different in the two situations. I wonder what's different about the renderer.

Phil Gyford 2010-06-22 16:17:54

It seems almost like the site resets itself to that positin. If you scroll a little bit, it will pop back to the top in a few seconds. You haven't defined the META-tag REFRESH, have you?

Emil 2010-06-22 17:07:55

No. I'm not sure what you mean by "pop back to the top". I think maybe that's just the very first time you open the icon from the Home Screen - initially it just has a kind of "preview" version from Safari, but no Safari location bar at the top of the page. When it loads the page for real, then it positions it at the top of the screen. I don't think that's related to this issue.

Phil Gyford 2010-06-22 20:31:42

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.

Louie 2010-06-22 16:05:59

Thanks, but that seems to do roughly the same thing - the site looks OK in Safari, but not when opened from the Home Screen. Weird.The Apple docs suggest a fixed-width site should be fine if you set the viewport appropriately: http://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/Articles/MetaTags.html#//apple_ref/html/const/viewport"if your webpage is narrower than 980 pixels then you should set the width of the viewport to fit your web content. If you are designing an iPhone-specific web application... set the width to the width of the device."

Phil Gyford 2010-06-22 16:16:41

Hello! 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.

Gary Barnett 2010-07-14 13:37:01

ansaurus

tags:

views:

answers:

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

related questions