Question

我已经阅读了很多"viewport" tutorials，但我似乎无法找到一个简单的解决方案，始终显示以居中为中心且完全可见的div。我创建了一个JSFIddle，它可以在桌面和iPad上以横向模式运行。在纵向模式和较小的平板电脑上，即使在横向模式下，div也不完全可见。

如果我将初始比例设置得较低，那么div也会在横向模式下缩小，现在它在iPad上变得太小了！什么是正确的视口设置......？

HTML ：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="appcontainer">
    <div id="main">Main content</div>
</div>

CSS ：

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #CCCCCC;
} 

#appcontainer {
  position: absolute;
  left:50%; top:50%;
  margin:-320px 0 0 -400px;
  width:800px; height:640px;
  border:1px solid blue;
  background-color: rgba(146,255,92,0.74);
  color:white;
}

#main {
  width:800px; height: 530px;
  border:1px solid red;
  background-color: white;
  color:black;
}

Answer 1

如果您想要使用窗口缩放某些内容并始终居中，请使用百分比，而不是固定像素。设置可能会很痛苦，但始终有效。

#appcontainer {
position: absolute;
left:50%; top:50%;
margin:-10% 0 0 -8%;
width:80%; height:auto;
border:1px solid blue;
background-color: rgba(146,255,92,0.74);
color:white;
}

#main {
width:100%; height: 100%;
border:1px solid red;
background-color: white;
color:black;
}

在景观和肖像中移动视口的麻烦

1 个答案: