Why doesn't the iPhone display my sites properly?

[wesg]

I've been working on a number of websites that use a horizontal navigation bar. Each browser displays the list properly (Safari, Firefox, Camino, IE, etc) except when I view it with my iPod touch. It appears that the width element doesn't work properly.

View for yourself at
http://www.ryersonformulasae.com
http://www.fdigiorgio.ca

Why doesn't the iPod display these elements properly? What can I do to fix it?

 

[angelwatt]

Looks like the page does some JavaScript work on the navigation. I use NoScript on Firefox so the navigation didn't fit on one line when I first got to the page. I don't have a iPhone or any other mobile web device to see what you're seeing that isn't correct, but if it has to do with fitting on one line I'd say it's likely related to the JavaScript. It may not recognize the iPod Touch appropriately and thus applies a bad fix to it. You shouldn't need JavaScript to make it fit for all browsers. I do the same thing on my site without any as well as many other sites.

 

[wesg]

Do you have any tips for making something like this work for all browsers without JS?

 

[angelwatt]

Do you have any tips for making something like this work for all browsers without JS?

Check out CSS Play for tons of examples.

 

[bielen]

Check out:

http://www.alistapart.com/articles/putyourcontentinmypocket

Depending on what your exact issue, the CSS command:

-webkit-text-size-adjust: none;

will adjust the text to format properly on the iPhone.