generateViewport
你可以使用静态的 viewport 对象或动态的 generateViewport 函数来自定义页面的初始视口。
值得注意的是：
viewport对象和generateViewport函数导出仅在服务器组件中支持。- 你不能在同一路由段中同时导出
viewport对象和generateViewport函数。- 如果你正在迁移
metadata导出，可以使用 metadata-to-viewport-export codemod 来更新你的更改。
viewport 对象
要定义视口选项，请从 layout.jsx 或 page.jsx 文件中导出一个 viewport 对象。
layout.tsx
import type { Viewport } from "next";
export const viewport: Viewport = {
themeColor: "black",
};
export default function Page() {}layout.jsx
export const viewport = {
themeColor: "black",
};
export default function Page() {}generateViewport 函数
generateViewport 应返回一个包含一个或多个视口字段的 Viewport 对象。
layout.tsx
export function generateViewport({ params }) {
return {
themeColor: "...",
};
}layout.js
export function generateViewport({ params }) {
return {
themeColor: "...",
};
}值得注意的是：
- 如果视口不依赖于运行时信息，应该使用静态的
viewport对象 而不是generateViewport来定义。
视口字段
themeColor
了解更多关于 theme-color 的信息。
简单主题颜色
layout.tsx
import type { Viewport } from "next";
export const viewport: Viewport = {
themeColor: "black",
};layout.jsx
export const viewport = {
themeColor: "black",
};<head>
<meta name="theme-color" content="black" />带有媒体属性
layout.tsx
import type { Viewport } from "next";
export const viewport: Viewport = {
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "cyan" },
{ media: "(prefers-color-scheme: dark)", color: "black" },
],
};layout.jsx
export const viewport = {
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "cyan" },
{ media: "(prefers-color-scheme: dark)", color: "black" },
],
};<head>
<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />width、initialScale、maximumScale 和 userScalable
值得注意的是：
viewportmeta 标签会自动设置，通常不需要手动配置，因为默认值已经足够。但是，为了完整性，这里提供了相关信息。
layout.tsx
import type { Viewport } from "next";
export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: false,
// 还支持以下不太常用的属性
// interactiveWidget: 'resizes-visual',
};layout.jsx
export const viewport = {
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: false,
// 还支持以下不太常用的属性
// interactiveWidget: 'resizes-visual',
};<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>colorScheme
了解更多关于 color-scheme 的信息。
layout.tsx
import type { Viewport } from "next";
export const viewport: Viewport = {
colorScheme: "dark",
};layout.jsx
export const viewport = {
colorScheme: "dark",
};<head>
<meta name="color-scheme" content="dark" />类型
你可以使用 Viewport 类型为你的视口对象添加类型安全。如果你在 IDE 中使用 内置的 TypeScript 插件，则不需要手动添加类型，但如果你想的话，仍然可以显式添加。
viewport 对象
import type { Viewport } from "next";
export const viewport: Viewport = {
themeColor: "black",
};generateViewport 函数
常规函数
import type { Viewport } from "next";
export function generateViewport(): Viewport {
return {
themeColor: "black",
};
}带有段属性
import type { Viewport } from "next";
type Props = {
params: { id: string };
searchParams: { [key: string]: string | string[] | undefined };
};
export function generateViewport({ params, searchParams }: Props): Viewport {
return {
themeColor: "black",
};
}
export default function Page({ params, searchParams }: Props) {}JavaScript 项目
对于 JavaScript 项目，你可以使用 JSDoc 来添加类型安全。
/** @type {import("next").Viewport} */
export const viewport = {
themeColor: "black",
};版本历史
| 版本 | 变更 |
|---|---|
v14.0.0 | 引入了 viewport 和 generateViewport。 |