Question

当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上的截图：

With the address bar

Address bar is masked

在第二个屏幕截图中，我们可以清楚地看到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％。

Answer 1

因此，要在移动设备上正确调整大小，您需要分配设备的宽度和高度，而不仅仅是宽度和高度。您可以进入HTML文件，然后在标题部分添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

和

<meta name="viewport" content="height=device-height, initial-scale=1.0">

希望这行得通！

Answer 2

隐藏地址栏后，Android会在页面底部添加额外的空间。因此，为了在移动设备上正确调整大小，您需要分配设备，就像Simplex网站的首席执行官所说：

宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

高度：

<meta name="viewport" content="height=device-height, initial-scale=1.0">

Answer 3

将主体的高度设置为100vh，将宽度设置为100vw

如果这不起作用，请在调整窗口大小时尝试以下javascript：

document.body.style.width = String(window.innerWidth)+"px";
document.body.style.height = String(window.innerHeight)+"px";

如果这不起作用，则将innerWidth / Height替换为externalWidth / Height。

尝试将JS与CSS一起使用。

调整Chrome地址栏屏蔽功能（Android）

3 个答案: