移动端浏览器高度与地址工具栏的神秘关系
移动端浏览器中,地址栏、工具栏和主视区的错综复杂关系,给开发者带来不少疑惑。尤其是当使用 100vh 作为高度时,主视区的高度会超出视窗,露出地址栏和工具栏。
问题解析
这是因为 100vh 表示视窗高度,包括地址栏和工具栏。而有些移动端浏览器,当页面内容可滚动时,会自动隐藏地址栏和工具栏。因此,一开始不可滚动时,主视区实际高度为视窗高度减去地址栏和工具栏高度。而当滚动时,隐藏地址栏和工具栏,主视区高度就变为视窗高度。
解决方案
为了控制这种关系,可以采用以下方法:
这些单位是基于设备物理屏幕高度,不受地址栏和工具栏影响。例如:
body { height: 100dvh; }
在页面加载时,获取主视区高度(可用 window.innerHeight 获得),然后动态赋值给主视区,如下所示:
function adjustViewport() { const height = window.innerHeight; const container = document.querySelector(".container"); container.style.height = `${height}px`; } adjustViewport(); window.addEventListener("resize", adjustViewport);
实现不可滚动效果
如果需要实现不可滚动效果,可以将 body 高度设置为屏高,并将 overflow-y 设置为 hidden,如下所示:
body { height: 100vh; overflow-y: hidden; }
伪元素覆盖导致白边?如何解决?
如何将简写的 CSS 属性转换为详细的 CSS 属性?
如何将线性渐变线段拼接成多条线段并保持原始渐变效果?
Element UI水平菜单:如何将鼠标悬停展开改为点击展开?
在Vue中使用rem插件实现自适应屏幕大小时,需要刷新才能达到预期效果的原因主要有以下几点:DOM更新时机:Vue的生命周期和DOM更新机制可能会影响rem插件的执行时机。有些rem插件在页面初次加载时可能不会立即生效,需要在DOM完全更新后才能正确计算和应用rem单位。CSS注入顺序:如果rem插件通过JavaScript动态生成CSS规则,这些规则可能在页面初次渲染时没有及时注入到DOM中。刷新页面后,CSS规则被正确注入,从而达到预期效果。视口变化检测:有些rem插件依赖于视口大小的变化来重新计算r
网页如何实现选择本地文件夹功能,如同VS Code for the Web?