Next.js中固定宽度meta viewport标签失效问题排查

核心原因 #

Next.js默认会自动注入一个viewport标签：

<meta name="viewport" content="width=device-width, initial-scale=1" />

即使你在_app.tsx或页面中添加了自定义viewport，默认标签可能会和你的自定义标签共存，浏览器会优先遵循优先级更高的规则，导致你的设置不生效。

解决方案1：给自定义viewport添加priority属性 #

在_app.tsx的Head组件中，给你的viewport标签加上priority属性，Next.js会优先渲染这个标签，并且不再注入默认的viewport：

import Head from 'next/head';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        {/* 添加priority属性覆盖默认viewport */}
        <meta name="viewport" content="width=600" priority />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

解决方案2：检查CSS布局影响 #

即使viewport生效，页面内容可能因为CSS设置撑满屏幕。确保页面的根容器限制宽度：

/* 全局样式（比如globals.css） */
body {
  margin: 0 auto;
  max-width: 600px;
  padding: 0 1rem; /* 可选：添加内边距避免内容贴边 */
}

验证方法 #

1. 打开Chrome DevTools，查看<head>标签下是否只有你自定义的viewport标签，默认的已消失
2. 在控制台执行console.log(window.innerWidth)，在移动端模拟环境下应该输出600
3. 切换到设备工具栏，选择自定义设备设置宽度为600px，查看页面布局是否符合预期

内容的提问来源于stack exchange，提问作者Juan Guillermo Sierra