Viewport

Viewport renders the <meta name="viewport"> tag in your document head. It always emits a tag, falling back to the integration headTags.viewport config value when no content prop is provided.

Props

prop	type	default	required	description
`content`	`string`	`"width=device-width, initial-scale=1"`	No	Content value for the viewport meta tag. Falls back to the integration `headTags.viewport` config when omitted.

Examples

Basic

Input:

<Viewport content="width=device-width, initial-scale=1" />

Output:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Automatic

Uses the integration headTags.viewport value when no prop is provided, which defaults to "width=device-width, initial-scale=1".

Input:

<Viewport />

Output:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Decisions Made

Always renders a tag

Unlike most other head components, Viewport always emits a tag. A missing viewport tag causes mobile browsers to render pages at desktop width, so the absence of a value is treated as an error rather than an opt-out condition.

Default is the standard responsive value

The default width=device-width, initial-scale=1 is the de-facto responsive baseline recommended by browser vendors and the HTML standard. It works correctly for the majority of sites without adjustment.

Uses integration config as default

The content prop falls back to the integration headTags.viewport config value. This lets you set a site-wide viewport default in one place and have it apply across all pages without repeating the value in every Viewport or Head usage.

Source code

---
import config from "virtual:eminence-astro-suite/head-tags";

interface Props {
  /**
   * Content value used by the viewport meta tag.
   * @default "width=device-width, initial-scale=1" via integration virtual config
   */
  content?: string;
}

const { content = config.viewport } = Astro.props;
---

<meta name="viewport" content={content} />