Website appearance on iPhone

[mitchell1981]

Hi All,

 

Sorry, another question about my new website!

 

Does anyone have much knowledge of how an iPhone renders text on a webpage? I realise that the screen size is a lot smaller, but I would have thought that the easy zooming capabilities would mean that it should render text in exactly the same way as a desktop browser, however, I seem to get far fewer words per line when my website is displayed on the iPhone. See attached screenshot:

 

http://new.mascalls.kent.sch.uk/iphone.jpg

 

And this messes up my layout! I know that my layout should be able to dynamically cope with this, but I'm still learning CSS. Is there a way to force the way the text is rendered so that I get the same number of words per line on any device?

 

At the moment I'm using the "em" method of font sizing. Should I use normal font sizes instead?

 

Here is a link to the website so you can see how it renders in a normal browser.

 

Thanks.

[Marci]

you need to add some empty divs as spaceholders using clear:both css to avoid it ovelapping stuff when the res gets lowered (eg: bottom of your main block before the separating line above the two big pics), but yes, fixed font sizes should also help... or a body font size fixed, then everything else using percentage...

[mitchell1981]

Thanks for the suggestions. I fiddled around with this for hours but couldn't get it to look right. However, I did stumble accross the solution:

 

Add this to the CSS and it fixes the layout:

 

-webkit-text-size-adjust: none;

 

Unfortunately it won't validate, but it does the job. It basically turns off the text rescaling options on the iPhone and other webkit browsers.

[p858snake]

Thanks for the suggestions. I fiddled around with this for hours but couldn't get it to look right. However, I did stumble accross the solution:

 

Add this to the CSS and it fixes the layout:

 

-webkit-text-size-adjust: none;

 

Unfortunately it won't validate, but it does the job. It basically turns off the text rescaling options on the iPhone and other webkit browsers.

That is because --: are vendor specific and not part of the w3c specs or are working versions of the draft specs. So it's perfectly alright to not have them validating.