iphone增加了一個奇怪的左邊距/填充

網站寬度爲640px，但iPhone在678px渲染文檔。在android中它看起來很棒。

我添加視口元：

<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個像素，與身體無關（如果我設置了身體黑色圓到藍色的一面仍然保持白色）。

我嘗試了一切，但沒有運氣。有什麼建議嗎？

來源

2012-09-02 Amtel25

您是否使用[Normalize.css]（http://necolas.github.com/normalize.css/）重置每個CSS規則？ –

我終於找到了解決方案。

這些行加入，因爲對身體的CSS右對齊的：

text-align:right; 
direction:rtl;

如果我刪除這些行，並將其添加到它的正常工作身體內一個div。

來源

2012-09-05 00:51:43 Amtel25

首先，它將有助於以乾淨的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調試控制檯並回復它提供的任何消息。

來源

2012-09-02 15:07:07 Wildaker

嗨10x爲您的答案，首先所有用戶可擴展爲0當非值寫入，第二個網站被編碼爲640px，因此寬度不能是設備寬度，因爲它的佈局不伸縮也不響應因此在另一個設備即galaxy s1當resulotion是320px生病時看到網站的一半 – Amtel25

其中沒有包含user-scalable設置的內容確實等同於content =「width = 640，用戶可擴展=無「'。但是，''觸發錯誤;包括'user-scalable'位，你必須將其設置爲'yes'或'no'。 – Wildaker

iphone增加了一個奇怪的左邊距/填充

回答

相關問題