调整 Chrome 地址栏屏蔽的大小问题 (Android)答案

【问题标题】：Resizing troubles on Chrome address bar masking (Android)调整 Chrome 地址栏屏蔽的大小问题 (Android)
【发布时间】：2018-02-12 16:55:15
【问题描述】：

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

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% 适合窗口高度。

【问题讨论】：

您上面的脚本不起作用，因为您无法将字符串与整数连接起来。将window.innerHeight 替换为String(window.innerHeight)

标签： android html css google-chrome

【解决方案1】：

当地址栏被隐藏时，Android 会在页面底部添加额外的空间。因此，为了在移动设备上正确调整大小，您需要分配 DEVICES，正如 Simplex Websites 的 CEO 所说：

宽度：

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

身高：

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

【讨论】：

【解决方案2】：

设置body的高度为100vh，宽度为100vw

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

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

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

尝试使用带有 CSS 的 JS。

【讨论】：

【解决方案3】：

因此，要在移动设备上正确调整大小，您需要指定设备的宽度和高度，而不仅仅是任何宽度和高度。您可以进入您的 HTML 文件并在 head 部分添加：

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

和

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

希望这行得通！

【讨论】：

没有。一个是设备的高度，一个是设备的宽度。