iphone is adding a weird left margin/padding

Question

This is a website with the mobile view.

The website width is 640px but the iPhone renders the document in 678px. In android it look great.

I added viewport meta:

<meta name="viewport" content="width=640, user-scalable">

And the body CSS is:

body,html{
margin:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
font-size:14px;
font-family: "Arial";
background: white;
direction: rtl;
text-align: right;
width:640px !important;
overflow: hidden;}

In iPhone it looks like this:

As you can see it adds 38 pixels on the left side, not related to the body (if I set the body background to blue the side still stays white).

I tried everything but with no luck. Any ideas?

Answer 1

Firstly it would help to be starting with clean HTML and CSS—your HTML is far from valid, and that can cause all sorts of errors (see here just for the HTML errors...).

Secondly:

<meta name="viewport" content="width=640, user-scalable">

is incorrect. It needs to be:

<meta name="viewport" content="width=640, user-scalable=yes">

and it would be better practice if it was:

<meta name="viewport" content="width=device-width, user-scalable=yes">

(See here).

With a clean starting-point, it will be easier to debug. Also, turn on the Mobile Safari debug console and respond to any messages it gives you.