针对移动屏幕上 100vh 问题的 Javascript 修复

你好，dev.to！

我是新西兰开发者学院的一名软件开发专业学生，这是我的第一篇公开帖子。🎉

我想这里很适合分享一个最近帮了我不少忙的、略显晦涩的修复方案。几周前，我周末在一家可爱的咖啡馆上班，老板问我是否愿意加班帮忙设计新的落地页。我同意了，然而，这个任务比我最初预想的要棘手一些！我的老板（他也是一名平面设计师）设计了一个华丽夺目的全页页面。然而，它只有在页面加载时显示完整且没有滚动条的情况下才能真正发挥作用。

我最初的想法是把所有元素都设为 100vh。然而，事情当然没那么简单——我相信很多人都遇到过，100vh 并不总是……100vh。在某些移动浏览器上，最常见的是 iOS 上的 Chrome 和 Safari，100vh 实际上指的是 outerHeight。这意味着浏览器下方的工具栏不会被考虑在内，从而切断了设计的最后几格高度。虽然你可以使用 CSS 来解决这个问题，但一旦用户开始向下滚动，下方的浏览器工具栏就会消失，视图高度也会随之改变。

（我在研究这个问题时发现一个有趣的事实：这种行为完全是故意的！如果你感兴趣的话，可以看看2015 年的这篇博客。）

虽然这对大多数网站来说不是什么大问题，但网上还是有一些关于这个话题的不同讨论。可惜的是，CSSfill-available对我来说不起作用。我发现最有趣的解决方案是Elementor 的 Github 仓库中一个帖子里的一个评论。它使用 JavaScript 获取 innerHeight 并将其赋值给设计外部容器的 min-height CSS 属性。为了在用户开始滚动和浏览器工具栏收缩时更改 innerHeight，我们使用了一个事件监听器。这对于咖啡馆落地页的设计非常有效。

这是我使用的解决方案，改编自该评论：

// define a function that sets min-height of my-element to window.innerHeight:

const setHeight = () => {
    document.getElementById("my-element").style.minHeight = window.innerHeight + "px"
};

// define mobile screen size:

let deviceWidth = window.matchMedia("(max-width: 1024px)");

if (deviceWidth.matches) {
// set an event listener that detects when innerHeight changes:

    window.addEventListener("resize", setHeight);

// call the function once to set initial height:

    setHeight();
}

如果您使用的是 Wordpress（我之前就是），最简单的插入方法是将其包裹在 script 标签中，然后将其添加到 HTML 组件中所有其他内容的下方，然后删除所有填充，使其不可见任何空白。根据您的设计、主题和插件，您可能还需要在函数中添加更多行，以包含通常需要重新声明 100vh 规则的容器，例如，如果您使用的是 Elementor，则可能需要 .elementor-container 和 .elementor-widget-wrap。

虽然由于事件监听器的原因，这并非最经济的解决方案，但它正是我这个项目所需要的。希望其他人觉得它有用或有趣！👋