Web page is slightly wider than iPhone screen

Question

I'm working on a web app that works on the desktop as well as in a cell phone screen. However, when I view the app in Safari in the iOS simulator, the page is actually slightly wider than the screen of the simulator even though this tag is in the HTML file:

<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, initial-scale=1.0">

Any idea what might be causing this?

Answer 1

Try to use any developer tool to inspect the page. I'm sure you will find some div in the page that overflow horizontally. When you find it, try to set the width to 100% in your media queries also remove right and left padding and margin to the element. That should fix it.

Answer 2

Giorgio is right. Also you can check if you have any span elements floating right or left. Make sure this span is within a div then implement an :after css to clear the float.

Like this:

.DIVCLASS:after {
    content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

Hope this helps!