<meta name="viewport"> HTML attribute value - HTML | MDN
Skip to main content
Skip to search
MDN
HTML
HTML: Markup language
HTML reference
Elements
Global attributes
Attributes
See all…
HTML guides
Responsive images
HTML cheatsheet
Date & time formats
See all…
Markup languages
SVG
MathML
XML
CSS
CSS: Styling language
CSS reference
Properties
Selectors
At-rules
Values
See all…
CSS guides
Box model
Animations
Flexbox
Colors
See all…
Layout cookbook
Column layouts
Centering an element
Card component
See all…
JavaScriptJS
JavaScript: Scripting language
JS reference
Standard built-in objects
Expressions & operators
Statements & declarations
Functions
See all…
JS guides
Control flow & error handing
Loops and iteration
Working with objects
Using classes
See all…
Web APIs
Web APIs: Programming interfaces
Web API reference
File system API
Fetch API
Geolocation API
HTML DOM API
Push API
Service worker API
See all…
Web API guides
Using the Web animation API
Using the Fetch API
Working with the History API
Using the Web speech API
Using web workers
All
All web technology
Technologies
Accessibility
HTTP
URI
Web extensions
WebAssembly
WebDriver
See all…
Topics
Media
Performance
Privacy
Security
Progressive web apps
Learn
Learn web development
Frontend developer course
Getting started modules
Core modules
MDN Curriculum
Check out the video course from Scrimba, our partner
Learn HTML
Structuring content with HTML module
Learn CSS
CSS styling basics module
CSS layout module
Learn JavaScript
Dynamic scripting with JavaScript module
Tools
Discover our tools
Playground
HTTP Observatory
Border-image generator
Border-radius generator
Box-shadow generator
Color format converter
Color mixer
Shape generator
About
Get to know MDN better
About MDN
Advertise with us
Community
MDN on GitHub
Blog
Toggle sidebar
Web
HTML
Reference
Elements
<meta>
<meta name>
viewport
Theme
OS default
Light
Dark
English (US)
Remember language
Learn more
Deutsch
English (US)
Español
Français
日本語
한국어
中文 (简体)
<meta name="viewport"> HTML attribute value
The viewport value for the name attribute of a <meta> element gives hints about how the viewport should be sized.
If specified, you define viewport-related behaviors using a content attribute in the <meta> element as a comma-separated list of one or more values.
In this article
Usage notes
Examples
Specifications
Browser compatibility
See also
Usage notes
A <meta name="viewport"> element has the following additional attributes:
content
The content attribute must be defined, and its value sets various viewport-related behaviors.
Its value is a comma-separated list of one or more key-value pairs specified as key=value. The following keys are defined:
width
Controls the (minimum) pixel width of the viewport (see viewport width and screen width). It can be set to a positive whole number of pixels between 1 and 10000 (like width=600) or to the special value device-width, which is the physical size of the device screen in CSS pixels. This value establishes the value of the vw unit.
height
Controls the (minimum) pixel height of the viewport (see viewport width and screen width). It can be set to a positive whole number of pixels between 1 and 10000 (like height=400) or to the special value device-height, which is the physical size of the device screen in CSS pixels. This value establishes the value of the vh unit.
initial-scale
Defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size.
It can be a number between 0.0 and 10.0.
maximum-scale
Defines the maximum amount to zoom in.
It must be greater or equal to the minimum-scale or the behavior is undefined.
Browser settings can ignore this rule, and iOS10+ ignores it by default.
It can be a number between 0.0 and 10.0.
minimum-scale
Defines the minimum zoom level.
It must be smaller or equal to the maximum-scale or the behavior is undefined.
Browser settings can ignore this rule, and iOS10+ ignores it by default.
It can be a number between 0.0 and 10.0.
user-scalable
A boolean indicating if the user can zoom the web page.
Browser settings can ignore this rule, and iOS10+ ignores it by default.
It can be either yes or no, defaulting to yes.
Warning:
Disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content. Additionally, WCAG requires a minimum of 2× scaling; however, the best practice is to enable a 5× zoom. For more information, see:
MDN Understanding WCAG, Guideline 1.4 explanations
Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
interactive-widget
Specifies the effect that interactive UI widgets, such as virtual keyboards, have on a page's viewport.
It can be the keyword resizes-visual, resizes-content, or overlays-content.
resizes-visual: The visual viewport gets resized by the interactive widget. This is the default.
resizes-content: The viewport gets resized by the interactive widget.
overlays-content: Neither the viewport nor the visual viewport gets resized by the interactive widget.
When the viewport gets resized, the initial containing block also gets resized, thereby affecting the computed size of viewport units.
viewport-fit
Defines the viewable portions of the web page.
It can be one of the keywords auto, contain, or cover.
auto: Doesn't affect the initial layout viewport, and the whole web page is viewable.
contain: The viewport is scaled to fit the largest rectangle inscribed within the display.
cover: The viewport is scaled to fill the device display.
It's highly recommended to use the safe area inset variables to ensure that important content doesn't end up outside the display.
Viewport width and screen width
The browser's viewport is the area of the window in which web content can be seen. The viewport size needs to be computed before the page's content can be laid out—the page can overflow the viewport, in which case the browser provides scrollbars for the user to scroll around and access all the content, but the viewport size is the guideline for how much space, especially horizontally, the content should fit into.
Some mobile devices and other narrow screens render pages in a virtual window or viewport that is wider than the screen, and then shrink the rendered result down to fit the screen size. Users can then zoom and pan to look more closely at different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space. This is done because not all pages are optimized for mobile and break (or at least look bad) when rendered at a small viewport width. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices. However, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques. The viewport <meta> element mitigates this problem of virtual viewport on narrow screen devices.
The most common setting is the following, which sets the viewport to match the device's width and displays content at 100% zoom:
html
<meta name="viewport" content="width=device-width, initial-scale=1" />
Sites can set their viewport to a specific size. For example, the definition "width=320, initial-scale=1" can be used to fit precisely onto a small phone display in portrait mode. This can cause problems when the browser renders a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices.
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:
html
<meta name="viewport" content="width=500, initial-scale=1" />
Screen density
Screen resolutions have risen to the size that individual pixels are indistinguishable by the human eye. For example, smartphones often have small screens with resolutions upwards of 1920–1080 pixels (≈400dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially, this caused usability and readability problems on many touch-optimized websites.
On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images may not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties.
The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor (density/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.
Examples
Using a meta viewport size
The following example indicates to the browser that the page should be rendered at the device width:
html
<meta name="viewport" content="width=device-width" />
Using a media query with a viewport meta
The following content value uses multiple keywords that hint to the browser to use fullscreen mode, along with viewport-fit, which helps avoid display cutouts such as mobile device notches:
html
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
The effect of interactive UI widgets
Interactive UI widgets of the browser can influence the size of the page's viewports. The most common such UI widget is a virtual keyboard. To control which resize behavior the browser should use, set the interactive-widget property.
By default, the virtual keyboard only resizes the visual viewport, which doesn't affect the layout of the page. You can make the page's layout adapt to the presence of the virtual keyboard by setting the interactive-widget property to resizes-content:
html
<meta name="viewport" content="interactive-widget=resizes-content" />
Specifications
Specification
CSS Viewport Module Level 1
# viewport-meta
Browser compatibility
Enable JavaScript to view this browser compatibility table.
See also
viewport glossary term
Prepare for viewport resize behavior changes coming to Chrome on Android on developer.chrome.com
Mobile viewports for responsive experiences on Adobe Experience League
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on Apr 22, 2026 by MDN contributors.
View this page on GitHub • Report a problem with this content
Filter sidebar
Clear filter input
HTML
Guides
Cheatsheet
Comments
Constraint validation
Content categories
Date and time formats
Microdata
Microformats
Quirks and standards modes
Responsive images
How to
Define terms with HTML
Use data attributes
Use cross-origin images
Add a hitmap on top of an image
Author fast-loading HTML pages
Add JavaScript
Reference
Elements
<a>
<abbr>
<acronym>
<address>
<area>
<article>
<aside>
<audio>
<b>
<base>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fencedframe>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<geolocation>
<h1>–<h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<marquee>
<menu>
<meta>
<meter>
<nav>
<nobr>
<noembed>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<plaintext>
<pre>
<progress>
<q>
<rb>
<rp>
<rt>
<rtc>
<ruby>
<s>
<samp>
<script>
<search>
<section>
<select>
<selectedcontent>
<slot>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
<xmp>
Attributes
accept
autocomplete
capture
content
crossorigin
dirname
disabled
elementtiming
fetchpriority
for
form
integrity
max
maxlength
min
minlength
multiple
pattern
placeholder
readonly
rel
required
size
step
Global attributes
accesskey
anchor
autocapitalize
autocorrect
autofocus
class
contenteditable
data-*
dir
draggable
enterkeyhint
exportparts
hidden
id
inert
inputmode
is
itemid
itemprop
itemref
itemscope
itemtype
lang
nonce
part
popover
slot
spellcheck
style
tabindex
title
translate
virtualkeyboardpolicy
writingsuggestions
Attributes by element
<input type>
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<script type>
importmap
speculationrules
<meta name>
color-scheme
referrer
responsive-embedded-sizing
robots
text-scale
theme-color
viewport
<meta http-equiv>
Attribute values
<link rel> keywords
alternate stylesheet
compression-dictionary
dns-prefetch
manifest
me
modulepreload
noopener
noreferrer
preconnect
prefetch
preload
prerender
MDN
Your blueprint for a better internet.
MDN
About
Blog
Mozilla careers
Advertise with us
MDN Plus
Product help
Contribute
MDN Community
Community resources
Writing guidelines
MDN Discord
MDN on GitHub
Developers
Web technologies
Learn web development
Guides
Tutorials
Glossary
Hacks blog
Mozilla
Website Privacy Notice
Telemetry Settings
Legal
Community Participation Guidelines
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.