generateViewport
您可以使用静态的 viewport 对象或动态的 generateViewport 函数来自定义页面的初始视口。
了解一下:
viewport对象和generateViewport函数导出 **仅在服务器组件中受支持**。- 您不能从同一个路由段导出
viewport对象和generateViewport函数。- 如果您是从迁移
metadata导出而来，您可以使用 metadata-to-viewport-export codemod 来更新您的更改。
viewport 对象
要定义视口选项，请从 layout.jsx 或 page.jsx 文件中导出 viewport 对象。
layout.tsx | page.tsx
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: 'black',
}
export default function Page() {}generateViewport 函数
generateViewport 应返回一个 Viewport 对象，其中包含一个或多个视口字段。
layout.tsx | page.tsx
export function generateViewport({ params }) {
return {
themeColor: '...',
}
}了解一下:
- 如果视口不依赖于运行时信息，则应使用静态的
viewport对象 而不是generateViewport来定义。
视口字段
themeColor
详细了解 theme-color。
简单的主题颜色
layout.tsx | page.tsx
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: 'black',
}<head> 输出
<meta name="theme-color" content="black" />带有 media 属性
layout.tsx | page.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' },
],
}<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
了解一下：
viewport元标记会自动设置，并且通常不需要手动配置，因为默认设置就足够了。但是，为了完整起见，提供了这些信息。
layout.tsx | page.tsx
import type { Viewport } from 'next'
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
// Also supported by less commonly used
// 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 | page.tsx
import type { Viewport } from 'next'
export const viewport: 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',
}
}带有分段 props
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。 |
这有帮助吗？