iphone正在添加一个奇怪的左边距/填充

Question

移动视图为a website。

网站宽度为640px，但iPhone以678px呈现文档。在android中它看起来很棒。

我添加了viewport meta：

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

身体CSS是：

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;}

在iPhone中它看起来像这样：

正如你所看到的那样，左侧增加了38个像素，与身体无关（如果我将身体背景设置为蓝色，则侧面仍保持白色）。

我尝试了一切，但没有运气。 有什么想法吗？

Answer 1

首先，从干净的HTML和CSS开始将有所帮助 - 您的HTML远非有效，并且可能导致各种错误（仅针对HTML错误请参阅here）。

其次：

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

不正确。它必须是：

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

如果是这样的话会更好：

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

（见here）。

使用干净的起点，调试起来会更容易。此外，打开Mobile Safari调试控制台并回复它为您提供的任何消息。

Answer 2

我终于找到了解决方案。

由于正文CSS上的右对齐，添加了这些行：

text-align:right;
direction:rtl;

如果我删除这些线并将它们添加到体内的div中，它就可以正常工作。