Next.js 14应用不同组件字体大小不一致问题求助

以下是针对你Next.js 14 App Router项目的具体排查步骤和修复方案：

1. 确认Viewport元标签配置 #

安卓浏览器桌面模式可能会自动篡改视口设置，导致字体缩放异常。在根layout.tsx的metadata中明确设置标准viewport：

export const metadata = {
  viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
};

该配置可以固定视口缩放比例，避免浏览器自动调整布局和字体。

2. 统一字体单位与根字体基准 #

如果使用rem作为字体单位，确保根元素的字体大小在所有断点下保持稳定，避免浏览器动态调整：

/* default.module.css */
:root {
  font-size: 16px; /* 固定根字体大小，作为rem的基准 */
}

/* 示例：所有组件字体使用rem定义 */
.pageTitle {
  font-size: 2rem; /* 对应32px */
}
.cardText {
  font-size: 1rem; /* 对应16px */
}

若需响应式字体，优先使用clamp()配合vw，但要确保不会触发安卓浏览器的强制缩放：

.pageTitle {
  font-size: clamp(1.8rem, 2vw, 2.5rem);
}

3. 禁用浏览器文本自动缩放 #

安卓浏览器有默认的文本缩放机制，可通过全局CSS禁用：

/* default.module.css */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

该属性能强制浏览器保持文本原始大小，避免桌面模式下的字体不一致。

4. 检查媒体查询断点的准确性 #

确保default.module.css中的断点使用min-width/max-width而非device-width，安卓桌面模式的视口宽度可能与DevTools模拟值有差异：

/* 正确写法：基于视口宽度的断点 */
@media (min-width: 1024px) {
  .pageTitle {
    font-size: 2.5rem;
  }
}

可通过安卓Chrome远程调试（手机开启USB调试，电脑Chrome访问chrome://inspect）查看实际视口宽度，验证断点是否生效。

5. 排查CSS Modules样式优先级冲突 #

不同组件的CSS Modules可能存在样式覆盖问题，通过安卓浏览器的开发者工具查看元素的computed样式，确认实际生效的font-size规则，是否被其他组件的样式或全局样式覆盖。若存在优先级问题，可通过更具体的选择器或!important（谨慎使用）修复。

6. 验证服务端渲染与客户端 hydration 一致性 #

若使用Server Components，确保样式在客户端正确注入。可将涉及字体的组件标记为'use client'，避免服务端渲染与客户端渲染的样式差异：

'use client';

import styles from './Component.module.css';

export default function MyComponent() {
  return <h1 className={styles.title}>My Title</h1>;
}

内容的提问来源于stack exchange，提问作者RKrish