html5 手机端高度不匹配-CFANZ编程社区

实现 HTML5 手机端高度不匹配的解决方案

在移动端开发中，浏览器的地址栏、工具栏等元素的出现常常导致视口的高度与预期不符，造成页面的布局问题。本文将指导一名初学者如何解决“HTML5 手机端高度不匹配”的问题，分解为清晰的步骤，并提供必要的代码示例。

流程概述

以下是解决“HTML5 手机端高度不匹配”的流程：

步骤	任务	代码示例
1	获取视口高度	`window.innerHeight`
2	设置 CSS 高度	`setViewportHeight()`
3	监听窗口变化事件	`window.onresize`
4	处理输入法弹出情况	`focus`和`blur`

步骤详解

步骤 1：获取视口高度

在 JavaScript 中，我们可以使用 window.innerHeight 来获取当前视口的高度。通过这个方式可以获取到实际可用的高度。

// 获取实际视口高度
let viewportHeight = window.innerHeight;

解释：这里定义了一个变量 viewportHeight，它存储当前窗口的高度。这个值将在后续的步骤中使用。

步骤 2：设置 CSS 高度

在获取到视口高度后，我们需要将其应用于主要的 HTML 元素，以确保页面内容在正确的高度内展示。

function setViewportHeight() {
    // 获取当前视口高度
    let viewportHeight = window.innerHeight;
    // 设置主容器高度
    document.documentElement.style.setProperty('--viewport-height', `${viewportHeight}px`);
}

// 一开始执行一次
setViewportHeight();

解释：通过 setViewportHeight() 函数，我们获取当前的视口高度并应用到根元素的 CSS 自定义属性 --viewport-height 上。

步骤 3：监听窗口变化事件

当窗口的大小发生变化时（例如，用户旋转手机），我们需要重新计算视口高度。

// 监听窗口大小变化
window.addEventListener('resize', setViewportHeight);

解释：通过添加事件监听，使得每当窗口尺寸变化时都会再次执行 setViewportHeight() 函数，确保高度始终匹配。

步骤 4：处理输入法弹出情况

在某些情况下，尤其是在输入框激活时，浏览器的工具条会弹出，这会影响视口高度。我们可以使用 focus 和 blur 事件处理此情况：

// 处理输入法弹出情况
document.querySelector('input').addEventListener('focus', setViewportHeight);
document.querySelector('input').addEventListener('blur', setViewportHeight);

解释：在输入框获取和失去焦点时再次设定高度，以应对输入法弹出对视口高度造成的影响。

关系图

以下是系统的 ER 图，展示了各个元素之间的关系：

erDiagram
    INPUT {
        string id
        string value
    }
    VIEWPORT {
        int height
        string unit
    }
    VIEWPORT --|> INPUT : "affects when"

甘特图

下面是呈现多个任务处理时间的甘特图：

gantt
    title 解决 HTML5 手机端高度不匹配
    dateFormat  YYYY-MM-DD
    section 任务
    获取视口高度         :a1, 2023-10-01, 1d
    设置 CSS 高度       :after a1  , 1d
    监听窗口变化事件     :after a1  , 1d
    处理输入法弹出情况   :after a1  , 1d