iPhone 添加了奇怪的左边距/填充

Question

这是a website具有移动 View 。

网站宽度为 640 像素，但 iPhone 以 678 像素渲染文档。在 Android 中看起来很棒。

我添加了视口(viewport)元:

<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 远非有效，这可能会导致各种错误(请参阅here仅了解 HTML 错误...)。

其次:

<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 调试控制台并响应它提供给您的任何消息。