gpt4 book ai didi

css - 手机横向和纵向视口(viewport)出现问题

转载 作者:太空宇宙 更新时间:2023-11-04 14:06:46 24 4
gpt4 key购买 nike

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

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

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 - 手机横向和纵向视口(viewport)出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21061750/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com