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

I finally found a solution.

These lines were added because of the right alignment on the body CSS:

text-align:right;
direction:rtl;

If I remove these lines and add them to a div inside the body it’s working fine.