頁面渲染更窄，而不是集中在iPad上

Question

這是我正在上課的page。不要擔心它是所有div - 這個練習可以讓你像試驗網頁字體一樣。

我的問題是，該頁面在IE，Firefox，Safari瀏覽器中呈現良好，但在iPad上並不居中且縮放比例關閉。如果你看看左上角的標題「餐巾紙上面」，它實際上在iPad上分成兩行。沒有左邊距但有相當多的右邊距。

感謝您的幫助 -

Answer 1

你可能需要視meta標籤。檢查鏈接瞭解這些信息以及要選擇的信息。 http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/

Answer 2

我查了我的iPad（最新IOS V5.1）的頁面，我可以看到在一行文字「頂部餐巾紙」，雖然你說得對整個網頁沒有得到居中對齊..

爲此，我建議你做2件事;

A.設置視口寬度如下（在head元素中添加此行）;

<meta name="viewport" width=device-width /> 

上述代碼將視口寬度設置爲設備寬度（即iPad上的768px）。你甚至可以硬編碼價值

<meta name="viewport" width=900 /> 

雖然這不是最好的辦法。

B.你可以嘗試是給下面的樣式，你的身體元素

margin:0 auto 

這將有效地中心對齊整個頁面的另一件事。

有關於如何在http://bit.ly/rs1npZ

Answer 3

設計的手機網站（iPhone/iPad的等），以上回答對我在iPad上沒有工作，一些真正的好信息。這是什麼工作。 在body標籤中，我在瀏覽器中添加了我想要的最小寬度。

body { min-width:1080px; } 

這個工作不增加

<meta name="viewport" width=device-width /> 

，但我離開它好措施頭部。

Answer 4

我有同樣的問題。

對我而言，由於div元素大於它們的容器，頁面被破壞。

我使用overflow-x屬性來修復它。

您可以嘗試將overflow-x：hidden;在你的容器上。

Answer 5

我有同樣的問題。下面是我如何修復它：

<meta name="viewport" content="width=device-width, maximum-scale=.9" />