当 Android 的 Google Chrome 地址栏被屏蔽时，我在调整元素大小时遇到了一些问题。这个问题仅在一周前出现。
我将我的 html 和我的 body 的高度设置为 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% 的窗口高度。
最佳答案
因此，要在移动设备上正确调整大小，您需要为 DEVICES 分配宽度和高度，而不仅仅是任意宽度和高度。您可以进入您的 HTML 文件并在标题部分添加:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
和
<meta name="viewport" content="height=device-height, initial-scale=1.0">
希望这有用!!
关于android - 调整 Chrome 地址栏屏蔽的问题 (Android)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46037276/