generateViewport

您可以使用靜態 viewport 物件或動態 generateViewport 函數來自訂頁面的初始 viewport。

要知道:

viewport 物件和 generateViewport 函數匯出僅在伺服器元件中受到支援。

您無法從同一個路由區段匯出 viewport 物件和 generateViewport 函數。

如果您是從遷移 metadata 匯出而來，您可以使用 metadata-to-viewport-export codemod 來更新您的變更。

`viewport` 物件

若要定義 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 欄位的 Viewport 物件。

layout.tsx | page.tsx

export function generateViewport({ params }) {
  return {
    themeColor: '...',
  }
}

要知道:

如果 viewport 不依賴執行階段資訊，則應該使用靜態 viewport 物件而不是 generateViewport 來定義。

Viewport 欄位

`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" />

使用媒體屬性

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 meta 標籤會自動設定，通常不需要手動設定，因為預設值已足夠。然而，此資訊僅供完整性參考。

layout.tsx | page.tsx

import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Also supported but 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 類型為您的 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: Promise<{ id: string }>
  searchParams: Promise<{ [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`。

generateViewport

`viewport` 物件

`generateViewport` 函數

Viewport 欄位

`themeColor`

`width`、`initialScale`、`maximumScale` 和 `userScalable`

`colorScheme`

類型

`viewport` 物件

`generateViewport` 函數

常規函數

使用區段屬性

JavaScript 專案

版本歷史

下一步

Metadata 檔案

Metadata