How to make site render for iphone

Get Started
1

so i got this site here.

i have tested in an iphone simulator, iBBdemo2, and Browsercam and they say it renders the site appropriately in iphone. However, my client, and one other friend who has an iphone says that it doesn’t render properly (the footer moves up to the top of the site in either portrait or landscape mode)

My query isn’t necessarily to get anyone here to debug this for me. Though, if all it takes is a couple minutes then I won’t complain. My question is what other tools or resources can I refer to figure out why the issue persists? I’m a complete novice with iphones and I don’t have one myself which makes this harder.

2

Oops, I flipped the iPhone sideways and now see what you mean about the footer jumping up. (Screenshot attached.)

The problem is the position: absolute. iPhone seems to hate that, in y experience. It’s not good use of CSS anyway. You don’t need it at all, so just remove it and see how it works in the iPhone. In the natural flow of things, the footer should sit below the other content anyway… even on the iPhone.

3

Hi,

If you have an Intel Mac, you can download the iPhone Simulator as part of Apple’s developer tools. It lets you see how things will render on iPhone.

Anyhow, you can target the iPhone with CSS, using this rule:

[COLOR="Blue"]@media only screen and (max-device-width: 480px) {[/COLOR]
   [COLOR="Gray"]#sidebar {
	width: 100px;
	}[/COLOR]
[COLOR="Blue"]}[/COLOR]

(You can put any CSS rules inside the blue bits; the #sidebar is just an example.)

Below are two screenshots I took, one of iPhone3 and one of iPhone4.

iPhne 4 seems fine. In 3, the only problem I see is that the text in the masthead is spilling out. It would be best to remove the height for that element, or at least change it to min-height: 200px;

I would also put a green background color on the masthead to account for text that overshoots the background image.

4

yes, ralphie is a savior. i can’t remember why i had the footer as absolute to begin with.

5

ok its working for me !