H5页面在折叠屏上适配方法？折叠屏如何适配？

当我还沉浸在 UI 样式改版后的喜悦中时，QA 同学拿着他的华为 Mate X6（折叠屏手机）来找我：”这个字体在展开状态下太大了，影响用户体验”。这才意识到我们的 H5 页面一直没有在折叠屏设备上进行过充分测试。

哎嘿，效果先行，先来看看最后优化的效果：

还可以吧，那就看看如何实现~

1.主流适配方案调研

1.1 PostCSS + Viewport Units (vw) 方案

技术原理

通过 postcss-px-to-vw 插件将设计稿中的 px 单位转换为 vw 单位，基于视口宽度进行动态缩放；

实现示例

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-vw': {
      viewportWidth: 375,    // 设计稿宽度
      viewportUnit: 'vw',    // 转换单位
      minPixelValue: 1,      // 最小转换值
      mediaQuery: false      // 不转换媒体查询中的 px
    }
  }
}

折叠屏适配实现：

/* 基础样式 */
.title {
  font-size: 8.5333vw; /* 32/375 * 100 */
}

/* 折叠屏展开状态限制 */
@media (min-width: 540px) and (max-aspect-ratio: 1/1) {
  .title {
    font-size: clamp(16px, 4vw, 24px); /* 动态限制字体大小 */
  }
}

方案优点

• 原生 CSS 实现：无需 JavaScript 依赖，兼容性最佳
• 真正的响应式：基于视口宽度动态缩放，适配效果自然
• 性能优异：无运行时计算开销，渲染性能好
• 维护简单：样式代码直观，易于理解和维护

方案缺点

• 字体控制复杂：小屏幕下字体可能过小，大屏幕下可能过大，需要额外使用 clamp 等函数控制
• 历史项目迁移：需要重写所有样式，迁移成本高

1.2 CSS 媒体查询方案

技术原理

通过 CSS 媒体查询针对不同屏幕尺寸应用差异化样式，是最传统的响应式布局方案。

实现示例

/* 基础布局 */
.product-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* 折叠屏展开适配 */
@media (min-width: 540px) and (max-aspect-ratio: 1/1) {
  .product-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 2vw;
  }
}

方案优点

• 原生 CSS 支持：无需任何 JavaScript，兼容性最好
• 实现简单直接：通过简单的媒体查询即可实现差异化布局
• 性能最优：无任何运行时开销，渲染效率最高
• 控制精准：可以针对特定屏幕尺寸做精确控制

方案缺点

• 代码冗余度高：需要编写大量媒体查询规则，代码维护成本高
• 适配粒度粗：只能基于断点做整体布局调整，无法实现精细化的动态缩放
• 维护困难：随着断点增多，CSS 代码变得复杂难以维护
• 响应式体验差：布局切换不够平滑，用户体验不如动态缩放方案

1.3 flexible.js + postcss-px-to-rem 现有适配方案

技术原理

通过 flexible.js + postcss-px-to-rem 插件将设计稿中的 px 单位转换为 rem 单位，基于视口宽度进行动态计算；

方案优势

(1)高效开发流程

• 自动单位转换：直接按设计稿写 px，通过 postcss-px-to-rem 自动转换为 rem。

  /* 输入（设计稿 750px） */
  .box { width: 200px; } 
  /* 输出（rootValue: 75） */
  .box { width: 2.6667rem; } /* 200/75 ≈ 2.6667 */
  

• 设计稿 1:1 映射：UI 设计稿统一宽度是 750px，那么在 postcss-px-to-rem 设置 rootValue: 75 即可直观转换。

(2)动态响应能力

• 实时调整布局：flexible.js 内部会监听resize事件，浏览器窗口大小变化时会自动重新计算根字体大小。

  // 计算根字体大小
  function refreshRem(){
  var width = docEl.getBoundingClientRect().width;
  if (width / dpr > 540) {
      width = 540 * dpr;
    }
  var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
  }
  
  // 监听 resize 事件
  win.addEventListener('resize', function() {
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 300);
  }, false);

(3)灵活覆盖与调试

• 可选择性禁用转换：通过 selectorBlackList 排除指定元素。

  // postcss 配置
  selectorBlackList: ['.no-rem'], // 不转换 .no-rem 类下的样式
  

• 可手动覆盖 REM 值：必要时可直接写 rem 单位，优先级会高于插件转换。

(4)性能优化

• 构建时完成单位转换：postcss-px-to-rem 在代码编译阶段处理，最终生成的 CSS 文件中已经是 rem 单位，无运行时计算开销。
• 相比纯 JavaScript 方案更高效：比实时计算vw或动态rem的方案（如某些 CSS-in-JS 库）性能更好。

2. 方案对比分析

基于以上多维度综合考量，团队最终选择优化现有方案（flexible.js+postcss-px-to-rem）作为最优解；

3. 具体实施与优化

现有方案最大计算宽度限制是 540*dpr，折叠屏展开时，字体过大，信息展示效率低。

这是一个商品详情页，折叠屏展开后首屏区域只有三个商品照片、商品标题、商品价格这三部分信息，而且字体放大，用户浏览效率低！

所以要解决的第一个问题，就是在 flexible.js 现有的 540 宽度基础上新增折叠屏的判断逻辑，目标是希望折叠屏展开后，字体和折叠起来的屏幕字体保持一致，可视区域内能展示更多的内容。

3.1 新增折叠屏展开状态判断，解决屏幕展示效率低的问题

那如何判断折叠屏是展开状态呢？经过查询市面上目前的折叠屏屏幕参数：

📱 横向展开式折叠屏屏幕参数（2024 主流机型）

📌 从上述数据中得出一些折叠屏的关键特征：

• 宽高比：集中在0.8~1.0之间（接近方形）

所以，在现有 flexible.js 的refreshRem函数内增加宽高比的判断逻辑，当宽高比在 0.8~1.0 之间，就认为是折叠屏展开状态。

目的是展开状态后，字体大小和折叠状态下保持一致（非放大），首先需要了解折叠状态时，手机的屏幕宽度数据。

3.2 限制展开状态下计算尺寸

📱 折叠屏展开/折叠状态屏幕宽度（CSS 像素）

从数据得出折叠态宽度范围：300-450px（CSS 像素），为了兼顾这个范围内的屏幕都能有比较好的体验，且简化计算逻辑，所以取中间值370作为基准，避免为每个机型单独适配。

代码实现逻辑如下：

// 计算根字体大小
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
    width = 540 * dpr;
  }

// 折叠屏展开判断
var screenWidth = win.screen.width;
var screenHeight = win.screen.height;
if (screenWidth / screenHeight >= 0.8 && screenWidth / screenHeight < 1) {
    width = 370;
  }
var rem = width / 10;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
}

// 监听 resize 事件
win.addEventListener('resize', function() {
  clearTimeout(tid);
  tid = setTimeout(refreshRem, 300);
}, false);

增加完这个逻辑后，就能在展开后，可视区域内的字体不放大，用户可预览更多的内容。

效果：可视区域内可浏览模块更多。

由于一些历史代码开发规范问题，会有模块内容宽度固定写死的问题存在，针对这类问题，整理成以下几类解决方案。

4. 其他场景优化方案

4.1 商品列表布局

商品列表可使用媒体查询实现展开后一行 2 列布局，展示更多商品，提高商品曝光量（这些实现可和设计同学进行讨论，不同的场景可采用不同的布局方案）。

示例代码：

/* 默认 1 列布局 */
.product-list {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}

/* 当宽度≥540px 时切换为 2 列（覆盖折叠屏展开态） */
/* 早期折叠屏（如 Galaxy Fold）展开后浏览器视口约为 540px，所以采用 540 进行处理 */
@media (min-width:540px) {
.product-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

效果如下：

4.2 图片内容高度处理

固定图片内容

可设置图片宽度、高度不固定，根据图片实际宽高比进行缩放：

.product-card img {
  width: 100%;
  aspect-ratio: 1/1; /* 明确设置宽高比 */
  object-fit: cover;
}

非固定图片内容

如需求内需要针对不同的屏幕尺寸，展示不同的图片内容时，可使用以下两种方式进行实现：

方案 1：HTML 的<picture>标签

<picture>
  <!-- 折叠屏展开时加载 wide.jpg -->
  <source media="(min-width: 540px) and (max-aspect-ratio: 1/1)" srcset="wide.jpg">
  <!-- 默认加载 square.jpg -->
  <img src="square.jpg" alt="商品" class="product-img">
</picture>

方案 2：JS 动态替换（根据屏幕状态）

function updateProductImages() {
const ratio = window.innerWidth / window.innerHeight;
// 是否折叠屏展开判断
const isFoldableExpanded = ratio >= 0.8 && ratio < 1;

document.querySelectorAll('.product-img').forEach(img => {
    img.src = isFoldableExpanded ? 'wide.jpg' : 'square.jpg';
  });
}

window.addEventListener('resize', updateProductImages);

个人更推荐优先使用 CSS 控制（不换图）。可减少 HTTP 请求，降低代码复杂度和特殊处理。

多行多列布局

可使用与商品列表处理的方式一样，一行 2 列变一行 4 列。

5. 总结

通过分析现有 flexible.js+postcss-px-to-rem 方案的优势，我们采用了渐进式优化而非推倒重来的策略。在保持团队开发习惯和项目稳定性的前提下，通过增加折叠屏检测逻辑，实现了对新型设备的适配。

关键技术要点

1. 折叠屏状态检测：基于宽高比（0.8~1.0）判断展开状态。
2. 动态字体控制：展开状态下限制计算宽度为 370px，保持字体一致性。
3. 响应式布局优化：通过媒体查询实现多列布局，提升信息密度。
4. 图片内容适配：支持不同屏幕状态下的图片展示策略。

适配效果数据

• 信息展示效率：折叠屏展开后可视内容增加约 40%。
• 用户体验提升：字体大小保持一致，避免阅读疲劳。
• 开发维护成本：在现有方案基础上优化，迁移成本几乎为零。

H5 页面在折叠屏上的适配需要综合考虑现有技术方案、业务需求和团队基建。通过优化现有的 flexible.js+postcss-px-to-rem 方案，成功兼容了折叠屏，提升了用户体验。

同时，我们也看到了其他方案的优势，为未来的技术优化和基建升级提供了方向。

以上文章来源大转转 FE，作者谢星。

以上关于H5页面在折叠屏上适配方法？折叠屏如何适配？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。