如何解决Next.js 12升级到13后的移动端分辨率异常问题？

核心是移动端viewport未正确配置，Next.js 13的App Router不再自动注入viewport meta标签（Pages Router默认会自动添加），导致浏览器以桌面端视口宽度渲染，最终出现分辨率虚高、页面内容被过度缩小的问题。

1. 在根layout中手动添加viewport标签 #

在app目录下的layout.tsx（或layout.jsx）的<head>区域添加适配移动端的meta标签：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        {/* 其他头部内容 */}
      </head>
      <body>{children}</body>
    </html>
  );
}

这个标签会告诉浏览器使用设备的实际物理宽度作为视口宽度，并设置初始缩放比例为1，是移动端适配的核心配置。

2. 核对旧站的适配细节（可选） #

如果想确认旧站的适配逻辑，可检查以下内容：

• 旧站_document.tsx或_app.tsx中是否存在自定义的viewport设置
• 是否通过next/head组件手动添加过相关meta标签
• 是否使用了CSS媒体查询、postcss-preset-env或Tailwind等适配工具

3. 验证修复效果 #

添加配置后重新部署，再查看移动端的window.innerWidth和window.innerHeight，数值应与旧站一致，页面内容显示会恢复正常。

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