视图移动在风景和肖像的问题

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; 
}