调整 Chrome 地址栏屏蔽的大小问题 (Android)
Posted
技术标签:
【中文标题】调整 Chrome 地址栏屏蔽的大小问题 (Android)【英文标题】：Resizing troubles on Chrome address bar masking (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)
【参考方案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">
希望这行得通！
【讨论】：
没有。一个是设备的高度，一个是设备的宽度。以上是关于调整 Chrome 地址栏屏蔽的大小问题 (Android)的主要内容，如果未能解决你的问题，请参考以下文章
Chrome 地址栏如何设置显示 http/https 和 www
批量修改谷歌浏览器(Chrome)地址栏保存的历史记录及导出功能探索研究