nuxt autofit.js 屏幕适配失效如何解决？

Question

在使用 Nuxt.js 集成 autofit.js 实现移动端屏幕适配时，常见问题为：页面首次加载时适配正常，但路由跳转后屏幕缩放失效。此问题通常因 autofit.js 仅在初始化时执行，未监听 Nuxt 的路由变化所致。SPA 模式下，页面不刷新，autofit.js 的根字体计算逻辑不会重新触发，导致后续页面尺寸错乱。需结合 Vue 的生命周期或 Nuxt 的布局/中间件机制，在每次路由切换后手动调用 autofit.refresh() 或重新执行适配逻辑，确保 rem 基准值动态更新，从而解决多页面场景下的适配失效问题。

Answer 1

一、问题背景与现象分析

在使用 Nuxt.js 框架开发移动端响应式应用时，开发者常通过引入 autofit.js 实现基于 rem 的屏幕适配方案。该库通过动态计算根元素（html）的 font-size 值，实现不同设备分辨率下的等比缩放。然而，在实际项目中普遍存在一个典型问题：

• 页面首次加载时，autofit.js 正确执行，rem 基准值设置准确，布局显示正常；
• 但当用户进行路由跳转（如从 /home 到 /detail）后，屏幕缩放失效，页面元素尺寸错乱；
• 刷新页面后又恢复正常，说明初始化逻辑有效，但运行时未持续监听环境变化。

此问题的根本原因在于：Nuxt.js 在 SPA 模式下采用客户端路由切换机制，页面不刷新，仅组件重新渲染。而 autofit.js 通常只在 DOMContentLoaded 或 mounted 阶段执行一次，未绑定 Vue Router 的导航事件，导致后续路由变更时未重新触发适配逻辑。

二、技术原理剖析

要深入理解该问题，需结合以下三个核心技术点：

1. Nuxt.js 路由机制：在 spa 模式下，$router 导航不会触发页面 reload，因此全局脚本如 autofit.js 的初始化代码仅执行一次；
2. autofit.js 工作机制：其核心是根据设备宽度动态设置 document.documentElement.style.fontSize，通常依赖 window.onload 或立即执行函数；
3. Vue 生命周期与 Nuxt 钩子：组件级的 mounted 不足以覆盖所有路由场景，需利用 beforeRouteUpdate 或 Nuxt 提供的 layout、middleware 进行统一控制。

如下表格对比了不同阶段 autofit.js 的执行情况：

场景	是否触发 autofit 初始化	rem 是否更新	原因分析
首次加载页面	✅ 是	✅ 正常	DOM 加载完成，autofit 执行
SPA 内部路由跳转	❌ 否	❌ 失效	无 DOM 重载，未调用 refresh
手动刷新页面	✅ 是	✅ 恢复	重新执行入口脚本
横竖屏切换	⚠️ 视实现而定	⚠️ 可能滞后	需监听 resize 事件

三、解决方案设计与实现路径

为解决 autofit.js 在路由跳转后失效的问题，需确保每次路由变化后都能重新计算 rem 基准值。以下是几种可行的技术路径：

• 方案一：在每个页面组件的 mounted 和 activated 中调用 autofit.refresh()；
• 方案二：利用 Nuxt 插件机制，在插件中监听 $router.beforeEach 钩子；
• 方案三：通过自定义 layout，在 watch 中监听 $route 变化；
• 方案四：封装 autofit 为 Vue 插件，注入全局 mixin，自动绑定路由变化事件。

推荐采用方案二 + 方案三组合方式，兼顾性能与维护性。

四、代码实现示例

以下是一个基于 Nuxt 插件的完整实现：

// plugins/autofit.client.js
import 'autofit.js';

export default ({ app }) => {
  // 确保只在客户端执行
  if (process.client) {
    const refreshFit = () => {
      if (window.autofit) {
        window.autofit.refresh();
      }
    };

    // 初始执行
    refreshFit();

    // 监听路由变化
    app.router.afterEach((to, from) => {
      setTimeout(refreshFit, 50); // 延迟执行以确保 DOM 更新
    });

    // 监听窗口大小变化（如横屏切换）
    window.addEventListener('resize', refreshFit);
  }
};
    

并在 nuxt.config.js 中注册：

export default {
  plugins: [
    { src: '~/plugins/autofit.client.js', mode: 'client' }
  ],
  // ...
}
    

五、进阶优化与流程图展示

对于大型项目，建议将 autofit 封装为可配置模块，并支持动态断点判断。例如：

• 仅在移动端触发适配；
• 避免频繁调用 refresh()，使用防抖处理；
• 结合 Intersection Observer 优化性能。

以下是完整的执行流程图：

graph TD
            A[页面加载或路由跳转] -- 客户端环境 --> B{是否已加载 autofit?}
            B -- 否 --> C[初始化 autofit]
            B -- 是 --> D[调用 autofit.refresh()]
            D --> E[更新 html fontSize]
            E --> F[重绘页面布局]
            G[window.resize] --> H[防抖延迟 100ms]
            H --> D
            I[app.router.afterEach] --> D