NextJS 14 App Router中Viewport标签shrink-to-fit=yes配置问题

1. 手动添加自定义Viewport元标签（解决Safari缩放问题） #

NextJS 默认会自动生成 viewport 标签，但你可以通过禁用自动生成并手动添加自定义标签来包含 shrink-to-fit=yes：

首先，在根布局文件（app/layout.tsx）中导出 viewport 为 null，禁用自动生成的标签：

import type { Viewport } from 'next';

// 禁用NextJS自动生成的viewport标签
export const viewport: Viewport = null;

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <head>
        {/* 手动添加包含shrink-to-fit的viewport配置 */}
        <meta
          name="viewport"
          content="width=500, shrink-to-fit=yes, maximum-scale=1, user-scalable=0"
        />
      </head>
      <body style={{ minWidth: '500px' }}>{children}</body>
    </html>
  );
}

这样就能确保页面只加载你自定义的 viewport 标签，避免重复，同时满足 Safari 对 shrink-to-fit 的需求。

2. 扩展Viewport类型（仅类型层面兼容） #

如果你想在 NextJS 的 Viewport 配置对象中使用 shrink-to-fit，可以通过 TypeScript 模块扩展来添加类型支持，但注意这仅解决类型报错，NextJS 底层不会自动将该属性转换为 meta 标签内容：

在项目中创建类型声明文件（如 types/next.d.ts）：

import type { Viewport } from 'next';

declare module 'next' {
  interface Viewport {
    shrinkToFit?: 'yes' | 'no';
  }
}

之后你可以在布局文件中这样写：

import type { Viewport } from 'next';

export const viewport: Viewport = {
  width: 500,
  maximumScale: 1,
  userScalable: false,
  shrinkToFit: 'yes', // TS不再报错，但实际不会生成shrink-to-fit属性
};

这种方式无法解决 Safari 的实际问题，仅用于代码类型提示，建议结合手动添加 meta 标签使用。

3. CSS 替代方案（无需依赖shrink-to-fit） #

如果不想依赖 shrink-to-fit，可以用 CSS 缩放实现小屏适配，同时避免 Safari 放大问题：

首先设置基础的 viewport 配置：

import type { Viewport } from 'next';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
};

然后添加全局 CSS（如 app/globals.css）：

body {
  min-width: 500px;
}

@media (max-width: 500px) {
  body {
    transform-origin: top left;
    /* 根据屏幕宽度自动缩放至500px宽度的比例 */
    transform: scale(calc(100vw / 500));
    /* 避免横向滚动 */
    overflow-x: hidden;
    /* 确保缩放后页面高度正确 */
    height: 100vh;
  }
}

这种方式通过 CSS 缩放模拟适配，无需依赖浏览器特定的 shrink-to-fit 属性，兼容性更好，但需要注意部分元素的定位、事件响应可能受 transform 影响，需测试调整。

关于ViewportLayout的说明 #

NextJS 的 ViewportLayout 类型主要用于配置视口与设备刘海、圆角的适配（如 viewportFit: 'cover'），和 shrink-to-fit 的小屏缩放功能无关，无法解决你的问题。

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