Next.js应用移动端视口异常：页面内容无故缩小问题求助

问题描述 #

开发的Next.js应用在PC端显示正常，但移动端页面内容异常缩小。怀疑是视口相关问题，当前layout.tsx中的视口配置如下：

<html lang="en">
  <Head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </Head>
  <body className={inter.className}>
    <div className="container ">
      <Nav />
      {children}
      <Footer />
    </div>
  </body>
</html>

解决步骤 #

1. 优化视口元标签属性 #

补充视口的额外属性，避免浏览器自动调整缩放或适配问题，修改后的meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover" />

• maximum-scale=1/minimum-scale=1：锁定缩放比例，防止页面被用户或浏览器缩放
• user-scalable=no：禁止用户手动缩放（根据需求可选）
• viewport-fit=cover：适配刘海屏等异形屏，避免内容被裁切

2. 检查容器宽度的CSS配置 #

确保.container类使用自适应宽度，避免固定宽度导致溢出：

.container {
  max-width: 1200px; /* 按需设置最大宽度 */
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem; /* 移动端添加内边距，防止内容贴边 */
}

如果容器使用了固定像素宽度（如width: 1000px），会导致移动端无法容纳，触发页面整体缩小。

3. 排查溢出视口的元素 #

使用Chrome DevTools的移动端模式，检查页面中是否有元素超出视口宽度：

• 打开DevTools的元素面板，查看每个元素的宽度
• 找到设置了固定宽度（如width: 1000px）或未限制宽度的元素，添加max-width: 100%强制适配：

.your-overflow-element {
  max-width: 100%;
  overflow-x: hidden; /* 可选，隐藏横向溢出内容 */
}

4. 适配Next.js App Router规范（Next.js 13+） #

如果使用App Router，推荐使用官方的Metadata API替代<Head>组件，避免重复渲染或配置失效：

export const metadata = {
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="container">
          <Nav />
          {children}
          <Footer />
        </div>
      </body>
    </html>
  );
}

内容的提问来源于stack exchange，提问作者tomaszM-dev