视图移动在风景和肖像的问题
问题描述:
我已经阅读了很多"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;
}
答
如果你想要的东西与窗口缩放比例始终为中心,使用百分比,而不是固定的像素。设置可能很痛苦,但始终有效。
#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;
}
其他阅读将会是CSS媒体查询:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – Enijar