H5 移动端页面适配方案与实践

移动端 H5 适配并不是把设计稿尺寸按比例缩放。不同设备存在屏幕宽度、像素密度、安全区域、浏览器工具栏和输入法行为等差异。可靠的适配方案应该先保证内容流和交互区域正确，再处理视觉比例和细节间距。

一、建立正确的视口

页面需要声明与设备宽度一致的布局视口：

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover"
>

width=device-width 让 CSS 像素宽度与设备逻辑宽度保持一致，initial-scale=1 设置初始缩放，viewport-fit=cover 允许页面延伸到带安全区域的屏幕边缘。

不要为了阻止误触而轻易禁用用户缩放。文本放大是重要的可访问性能力，若业务确有特殊限制，也应经过完整评估。

二、以内容流为基础布局

页面骨架优先使用弹性布局或网格布局，不要依赖大量绝对定位复刻设计稿。绝对定位适合徽标、浮层等脱离文档流的局部元素，不适合承载主要内容。

.product-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  box-sizing: border-box;
}

.product-card__content {
  flex: 1;
  min-width: 0;
}

.product-card__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

弹性子项默认可能不愿缩小，文本区域设置 min-width: 0 后，省略号才能在有限宽度中正确生效。

三、选择合适的尺寸单位

不同单位适合不同问题：

• px 适合边框、图标细节和稳定的局部尺寸。
• 百分比适合相对父容器的宽度。
• rem 适合基于根字号建立统一比例体系。
• 视口单位适合与屏幕宽高直接相关的场景。
• clamp 适合设置带上下限的流式尺寸。

例如，页面左右间距可以在小屏与大屏之间平滑变化：

.page {
  padding-inline: clamp(12px, 4vw, 24px);
}

.page-title {
  font-size: clamp(20px, 5vw, 28px);
  line-height: 1.3;
}

并不是所有值都要随屏幕等比放大。正文、按钮高度等元素通常需要可读性和可点击性的稳定下限。

四、处理安全区域

全面屏设备的顶部和底部可能被状态区域、圆角或手势区域占用。固定在底部的操作栏应叠加安全区域内边距。

.bottom-action {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: #ffffff;
}

.page-content {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

内容区域也要预留操作栏高度，否则最后一项会被固定栏遮住。项目若需兼容不支持相关环境变量的旧版本，应沿用现有兼容样式，并以最低支持版本为准。

五、解决视口高度变化

移动浏览器顶部和底部工具栏会动态收起，传统的 100vh 可能大于当前可见区域，导致按钮被遮挡。现代环境可以优先使用动态视口高度，并为项目支持范围内的旧环境保留现有方案。

.full-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

输入框聚焦后，软键盘同样会改变可视空间。登录页、聊天页等强依赖满屏高度的场景，需要在真机上检查键盘弹出、收起和横竖屏切换。

六、适配图片和媒体

内容图片应限制最大宽度，避免撑破容器：

.article-content img,
.article-content video {
  display: block;
  max-width: 100%;
  height: auto;
}

固定比例的封面可以使用 aspect-ratio 配合裁剪策略。若项目最低兼容范围不支持该属性，应采用项目已有的比例容器实现，不应直接引入不兼容能力。

七、保证触控体验

移动端没有稳定的悬停状态，关键操作不能只依赖 hover。按钮和图标需要足够的触控区域，相邻操作之间要保留间距。视觉图标较小时，可以通过父容器扩大点击范围，而不必把图标本身强行放大。

还应避免在可滚动页面中无条件阻止触摸默认行为，否则可能破坏滚动、回弹和系统手势。只有拖拽、画布等明确交互区域才需要精确接管指针事件。

八、建立设备验证矩阵

适配不能只靠桌面浏览器缩放窗口。至少应覆盖：

• 小屏和大屏手机。
• 横屏与竖屏切换。
• 带安全区域和普通矩形屏幕。
• 长中文、长英文、连续数字等文本。
• 系统深色外观。
• 输入法弹出后的表单页面。
• 弱网下图片尚未加载时的布局稳定性。

总结

移动 H5 适配的核心是建立弹性边界：视口配置正确，主布局跟随内容流，尺寸有合理上下限，固定区域考虑安全区和动态高度。再配合真实设备上的文本、键盘和横竖屏验证，页面才能在不同终端上保持可读、可点和稳定。