<zhead>
Meta tags

viewport

Controls the layout viewport on mobile browsers, including its width, initial zoom, and how content uses display cutout areas.

Code examples

Good example
<meta name="viewport" content="width=device-width, initial-scale=1">
The usual responsive default: match the device width and start at a 1:1 scale.
Avoid this example
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Attempts to prevent users from zooming beyond 100 percent, which harms accessibility.
Good example
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
Lets content extend into the full display area. Use safe-area inset values in CSS to protect important content.
Avoid this example
<meta name="viewport" content="width=1024">
Forces a desktop-sized layout viewport and usually makes responsive CSS harder to use.
Avoid this example
<meta name="viewport" content="">
An empty value gives the mobile browser no useful viewport instructions.

Recommendations

  • 01
    Start With the Standard Pair
    Use width=device-width, initial-scale=1 for a responsive page, then let the layout adapt with CSS.
  • 02
    Keep Pinch Zoom Available
    Do not set user-scalable=no or maximum-scale=1. People with low vision rely on zoom, and browsers may ignore restrictions for accessibility.
  • 03
    Handle Display Cutouts in CSS
    When using viewport-fit=cover, add safe-area inset padding where content could otherwise sit under a notch or rounded screen edge.

Related documentation

Related meta tags

application-name

name

Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels.

<meta name="application-name" content="Zhead">
A short application name that stays useful when the page title changes.

charset

charset

Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8.

<meta charset="utf-8">
The required character encoding for modern HTML.

color-scheme

name

Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls.

<meta name="color-scheme" content="light dark">
Declares support for both common schemes, with light listed first as the fallback preference.

default-style

http-equiv

Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited.

<meta http-equiv="default-style" content="Main Style">
Valid when a linked stylesheet set has the exact title Main Style.

format-detection

name

An Apple extension that can stop Safari on iOS from turning text that looks like a telephone number into a call link.

<meta name="format-detection" content="telephone=no">
The value documented by Apple for disabling automatic telephone links in Safari on iOS.