創建一個佔用iPad視口的CSS佈局

我想創建一個完全填充iPad視口的網頁。我也想確保內容不會超出視口以防止任何頁面級滾動。創建一個佔用iPad視口的CSS佈局

我曾試圖1024x768的縱向佈局，但我最終得到水平剪裁，以及頁面的內容延伸過去的視口的底部邊緣。

我已將此添加到：

而且我有一個簡單的#container DIV，坐在右邊的身下，風格是這樣的：

#container { 
width: 768px; 
max-width:768px; 
height:1024px; 
max-height:1024px; 
margin:0 auto; 
overflow:hidden;

}

任何人知道如何才能實現固定在iPad維度上的佈局？

謝謝！

Chris

這應填寫任何屏幕，還不錯，反應靈敏。

#container { 
    position: absolute, 
    top: 0, 
    bottom: 0, 
    left: 0, 
    right: 0 
}

2013-05-16 21:13:50

毆打1分鐘！ – Beejamin

哈哈，男人你們很快！這看起來很棒！我確實設法使用固定的像素尺寸工作，但我並不考慮通知欄佔用的20像素！要問另一個問題，如果我想將佈局固定到iPad視口，我應該向設計師提供哪些尺寸？ 1004 x 764會是正確的，不是嗎？ –

這是一個非常方便的技術：它基本上將盒子的所有四個邊緣推到視口的邊緣，而不需要指定寬度和高度。當然，你可以指定任何你喜歡的座標。一個有用的變化是設置3個座標，再加上寬度或高度，創建柔性滾動條等。 – Beejamin

爲什麼你不使用％？

例如：

#container { 
width: 50%; 
height: 50%; 
margin:0 auto; 
overflow:hidden; 
}

2013-05-16 21:10:59 AmirHussein

你可能是指100％ – Emre

100％的高度不會有正確的效果 - 這是相對於文檔，而不是視口，該文件是唯一的高，因爲它的內容。 – Beejamin

如果你有機會到HTML，您可以使用元標籤的視口。

<meta name="viewport" content="width=device-width"> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

只是一個想法。

2013-05-16 21:15:11

這是一個好東西，可以添加到這樣的頁面中，但不會影響頁面上任何元素的尺寸，所以它不是真正的問題答案。 – Beejamin

回答