调整Chrome地址栏屏蔽大小问题(Android)
调整Chrome地址栏屏蔽大小问题(Android)
提问于 2017-09-04 20:39:23
当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的调试器并不会占用100%的页面高度。
我几乎可以肯定它在3到4周前不会有这种行为。
你有什么办法让它正常工作吗？
编辑：
另一件奇怪的事情是:我添加了一个小脚本，用于根据窗口调整html元素的大小。
<script>
function resize (){
document.getElementsByTagName("html")[0].style.height = ''+window.innerHeight+'px';
}
resize();
window.onresize = resize;
</script>
正确地调整了html的大小，但不替换元素。
我真的不理解这种行为，因为元素相对于它们的父元素的位置，这是主体，适合100%的窗口高度。
回答 3
Stack Overflow用户
发布于 2018-07-03 07:36:09
因此，要在移动设备上正确调整大小，您需要分配设备的宽度和高度，而不仅仅是任意的宽度和高度。您可以进入HTML文件并在head部分添加：
<meta name="viewport" content="width=device-width, initial-scale=1.0">和
<meta name="viewport" content="height=device-height, initial-scale=1.0">希望这能起作用！！
Stack Overflow用户
发布于 2018-07-09 22:39:19
当地址栏被隐藏时，Android会在页面底部添加额外的空间。因此，为了在移动设备上正确调整大小，你需要分配设备，就像Simplex网站的首席执行官所说的那样：
宽度：
<meta name="viewport" content="width=device-width, initial-scale=1.0">高度：
<meta name="viewport" content="height=device-height, initial-scale=1.0">Stack Overflow用户
发布于 2018-07-07 22:43:36
将body的高度设置为100vh，将宽度设置为100vw
如果这不起作用，那么在调整窗口大小时试试这个javascript：
document.body.style.width = String(window.innerWidth)+"px";
document.body.style.height = String(window.innerHeight)+"px";如果不起作用，将innerWidth/Height替换为outerWidth/Height。
尝试将JS与CSS一起使用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46037276
复制相关文章
相似问题