<
zhead
>

Early Access

Meta Tags

viewport

Learn how to use the viewport meta tag to improve your site.

Defines how a website is displayed on mobile devices, influencing its width, scale, and initial zoom level. It is essential for creating responsive designs that adapt to various screen sizes.

Code Examples

<meta name="viewport" content="width=device-width, initial-scale=1" />
Ensures the page uses the device’s width as the viewport width and starts with a 1:1 zoom level.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Disables zooming, useful for applications rather than websites. Note this can hinder accessibility.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Handling a PWA taking the device’s width as the viewport width, starts with a 1:1 zoom level.
<meta name="viewport" content="width=1024" />
Sets a fixed width of 1024px regardless of the device's actual width, potentially causing usability issues on smaller screens.
<meta name="viewport" content="" />
Omitting a viewport declaration means the browser will render the page at typical desktop screen width, which can hamper usability on mobile.

Recommendations

  • Ensure Readability on All Devices
    Setting the viewport width to device-width and initial scale to 1 ensures your site is readable on all devices.
  • Avoid Large Fixed Widths
    Using a large fixed width can lead to a poor user experience on small screens, as users may have to scroll horizontally to view content.

Related Documentation

Related Meta Tags

application-name

name

Defines the name of the web application as it should be displayed when bookmarked or added to a mobile home screen.

<meta name="application-name" content="MyApp">
Simple, concise, and clearly displays the application's purpose or brand.

charset

charset

Defines the character encoding standard for the HTML document. Character encoding is essential for rendering text correctly in browsers.

<meta charset="charset" content="UTF-8">
Declares UTF-8 as the character encoding for the HTML document, supporting most characters and symbols in use today.

color-scheme

name

Instructs the browser on what color themes (light or dark mode) are supported and preferred for the content, ensuring visual consistency and accessibility.

<meta name="color-scheme" content="light dark">
Indicates to the browser that the site smoothly supports both light and dark themes, offering flexibility to match the user’s preferred theme setting.

default-style

http-equiv

Specifies the name of the preferred stylesheet to use on a web page. This allows users or user agents to choose the default stylesheet amongst many provided.

<meta http-equiv="default-style" content="Main Style">
Correct use case where "Main Style" is precisely the title of one of the page’s alternative stylesheets.

format-detection

name

Controls how telephone numbers, email addresses, and physical addresses are detected and displayed by the browser. By default, many browsers can automatically detect this information and style or link it accordingly, which might not always align with the web developers’ intentions.

<meta name="format-detection" content="telephone=no">
Prevents the browser from auto-detecting and linking phone numbers, allowing the site to control how and if phone numbers are clickable.