Nat*_*iet 9 html css android google-chrome
当Android的Google Chrome地址栏被屏蔽时,我在调整元素大小时遇到了一些麻烦.这个问题仅在一周前出现.
我将我的html和我的身体的高度设置为100%,我的元素位于绝对位置.当我屏蔽地址栏时,html元素不占用100%的高度,因此其子项未正确放置.
这是一个例子:
html{
height: 100%;
}
body{
background-color: #11afa5;
height: 100%;
}
.secondary{
position: absolute;
width: 50px;
height: 50px;
background-color: #38d025;
}
#BR{
top: 75%;
transform: translate(0,-25%);
right: 15px;
}
#MR{
top: 50%;
transform: translate(0,-50%);
right: 15px;
}
#TR{
top: 25%;
transform: translate(0,-75%);
right: 15px;
}
#BL{
top: 75%;
transform: translate(0,-25%);
left: 15px;
}
#ML{
top: 50%;
transform: translate(0,-50%);
left: 15px;
}
#TL{
top: 25%;
transform: translate(0,-75%);
left: 15px;
}<body>
<div class="secondary" id="TL">TL</div>
<div class="secondary" id="ML">ML</div>
<div class="secondary" id="BL">BL</div>
<div class="secondary" id="TR">TR</div>
<div class="secondary" id="MR">MR</div>
<div class="secondary" id="BR">BR</div>
</body>以下是Android上的截图:
在第二个屏幕截图中,我们可以清楚地看到Chrome的调试器,html不占用页面高度的100%.
我几乎可以肯定它在3或4周前没有这种行为.
你有什么想法让它正常工作吗？
编辑:
另一个奇怪的事情:我添加了一个小脚本,相应地调整了html元素对窗口的大小.
<script>
function resize (){
document.getElementsByTagName("html")[0].style.height = ''+window.innerHeight+'px';
}
resize();
window.onresize = resize;
</script>html正确调整大小,但元素不会被替换.
我真的不明白这种行为,因为元素相对于它们的父元素是正确的,它在窗口高度上适合100%.
小智 6
因此,要在移动设备上正确调整大小,您需要分配DEVICES的宽度和高度,而不仅仅是任何宽度和高度.您可以进入HTML文件并添加到head部分:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
和
<meta name="viewport" content="height=device-height, initial-scale=1.0">
希望这个有效!!
| 归档时间： |
|
| 查看次数： |
333 次 |
| 最近记录： |