Width of web site: My Site Vs. Apple.com


I am redesigning a web site. I have been annoyed that the old web site has a horizontal navigation bar that fits in a horizontal line in a computer or mac browser. When I look at it on my iphone this horizontal navigation bar is spread over two lines.

I have looked at “http://www.apple.com” on my iphone and the horizontal navigation fits in one line and the apple.com web site is wider than mine (when viewed on a computer or mac).

The only thing I have noticed is when you arrive at my site using an iphone the text looks fairly large in the navigation bar. Whereas if I view apple.com on my iphone the text in the navigation bar is barley readable (it is tiny text). Obviously they expect the user to ‘zoom in’.

I would prefer mine to be barely readable like apple.com than to have it taking up two lines!!

Does anyone know the key to success???


It probably has to do with you CSS and text size. use px size and not ems if you are using them. That might help

px means pixels but what is ems?

The current setting for text in the navigation bar is 13px. It looks fine on a computer/mac. What can I do for it to look good on iphone?