创建占用iPad视口的CSS布局

Question

我想创建一个完全填满iPad视口的网页。我还想确保内容不会延伸到视口以外，以防止任何页面级别的滚动。

我曾尝试过1024x768的人像布局，但我最终得到了水平裁剪，页面的内容延伸到了视口的底边。

我将此添加到：

我有一个简单的#container div，位于正文下方，样式如下：

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

}

任何人都知道如何实现固定在iPad尺寸上的布局？

谢谢！

克里斯

Answer 1

这应该填满任何屏幕，也很好，反应灵敏。

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

Answer 2

为什么你不使用％？

例如：

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

Answer 3

如果您有权访问HTML，则可以使用视图的元标记。

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

只是一个想法。