CODEWITHSUNDEEP
iphonewebmargin
Amtel25
Amtel25

Reputation: 31

iphone is adding a weird left margin/padding

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?

Upvotes: 3

Views: 3855

Answers (2)

Amtel25
Amtel25

Reputation: 31

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.

Upvotes: 0

Wildaker
Wildaker

Reputation: 2533

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.

Upvotes: 4

Related Questions