generateViewport
Sie können den ursprünglichen Viewport der Seite mit dem statischen viewport-Objekt oder der dynamischen generateViewport-Funktion anpassen.
Hinweis:
- Die Exporte des
viewport-Objekts und dergenerateViewport-Funktion werden nur in Server-Komponenten unterstützt.- Sie können nicht gleichzeitig das
viewport-Objekt und diegenerateViewport-Funktion aus demselben Routensegment exportieren.- Wenn Sie von der Migration von
metadata-Exporten kommen, können Sie den metadata-to-viewport-export-Codemod verwenden, um Ihre Änderungen zu aktualisieren.
Das viewport-Objekt
Um die Viewport-Optionen zu definieren, exportieren Sie ein viewport-Objekt aus einer layout.jsx- oder page.jsx-Datei.
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: 'black',
}
export default function Page() {}generateViewport-Funktion
generateViewport sollte ein Viewport-Objekt zurückgeben, das ein oder mehrere Viewport-Felder enthält.
export function generateViewport({ params }) {
return {
themeColor: '...',
}
}Hinweis:
- Wenn der Viewport keine Laufzeitinformationen benötigt, sollte er mit dem statischen
viewport-Objekt definiert werden und nicht mitgenerateViewport.
Viewport-Felder
themeColor
Mehr Informationen zu theme-color.
Einfache Theme-Farbe
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: 'black',
}<meta name="theme-color" content="black" />Mit Media-Attribut
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: [
{ media: '(prefers-color-scheme: light)', color: 'cyan' },
{ media: '(prefers-color-scheme: dark)', color: 'black' },
],
}<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 und userScalable
Hinweis: Das
viewport-Meta-Tag wird automatisch gesetzt, und eine manuelle Konfiguration ist in der Regel nicht erforderlich, da die Standardeinstellung ausreichend ist. Die Informationen werden jedoch zur Vollständigkeit bereitgestellt.
import type { Viewport } from 'next'
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
// Wird auch von weniger häufig verwendeten unterstützt
// interactiveWidget: 'resizes-visual',
}<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>colorScheme
Mehr Informationen zu color-scheme.
import type { Viewport } from 'next'
export const viewport: Viewport = {
colorScheme: 'dark',
}<meta name="color-scheme" content="dark" />Typen
Sie können dem Viewport-Objekt Typsicherheit hinzufügen, indem Sie den Viewport-Typ verwenden. Wenn Sie das integrierte TypeScript-Plugin in Ihrer IDE verwenden, müssen Sie den Typ nicht manuell hinzufügen, können ihn aber bei Bedarf explizit ergänzen.
viewport-Objekt
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: 'black',
}generateViewport-Funktion
Reguläre Funktion
import type { Viewport } from 'next'
export function generateViewport(): Viewport {
return {
themeColor: 'black',
}
}Mit Segmentprops
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-Projekte
Für JavaScript-Projekte können Sie JSDoc verwenden, um Typsicherheit hinzuzufügen.
/** @type {import("next").Viewport} */
export const viewport = {
themeColor: 'black',
}Versionshistorie
| Version | Änderungen |
|---|---|
v14.0.0 | viewport und generateViewport eingeführt. |