Search code examples
iphonecsssafarimobile-safaripositioning

What are typical reasons if your CSS layout is messed up in iPhone's mobile-Safari?


My site works on the current versions of the browsers I tested (Ff, Chrome, Safari, IE9). But the layout is totally messed up in iPhone Safari (iOS 6.0).

Have a look: http://btb-2.ch.emerson.ch-meta.net/ueber-uns.html

I searched the internet for specific problems of iPhone's mobile-Safari, but could only find some points about fixed positioning. Where to start with debugging if your layout is messed up in iPhone Safari?

What are typical problems? Thanks for any hint.


Solution

  • The reason being that the screen size is lower on an iPhone. It has a smaller width and your contents get squeezed together. Try dragging the edge of your browser to reduce its width and you will see the problem showing up.

    Check your <div id="container">. It is being pushed up as the screen size is reduced.