HTML <meta> viewport Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 29 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

Viewport represents the visible area of screen. In the browser, it refers to the part of browser window where the web content is displayed. The viewport attribute of HTML <meta> tag defines the size and scale of viewport. It is the first step towards responsive web design.

viewport

viewport

UI elements such as the address bar, toolbar, and scrollbars are not included in the viewport’s dimensions. These elements belong to the browser’s interface and are separate from the actual web page content.

Viewport in Meta Tag

The viewport meta tag is a crucial part of modern web development, especially for creating responsive web designs that look good on various devices (like desktops, tablets, and mobile phones). It helps control the layout and scaling of your webpage in the user's browser. The content attribute defines the various size options available for viewport. The various possible options available in this tag are listed below.

  • width
  • initial-scale
  • height
  • maximum-scale
  • minimum-scale
  • user-scalable
  • interactive-widget
Example: - A general meta tag for viewport looks like this. 

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




a. width

The width property in the viewport tag controls the width of the viewport (the visible area of a web page on a screen). It allows developers to specify how the page should be scaled on different devices.

This attribute defines the size of viewport's width in pixels. Its value can be a positive integer or the keyword device-width.

  • device-width - Sets the viewport width to the width of the device's screen in CSS pixels. This is the most common and recommended value for responsive design. This keyword works with all the different screen sizes.
  • A positive integer - You can set a specific width (in pixels), but this is rarely recommended for modern responsive design.

Example:This will make the viewport always 1024 pixels wide, regardless of the device. 


<meta name="viewport" content="width=1024" >



b. initial-scale

The initial-scale property specifies the level of initial zoom when a page is first loaded. It can take any value between 0.0 to 10. The default value is 1. The figure below depicts its effect at various zoom levels.

viewport-initial-scale

viewport-initial-scale

  • 1.0 - It means no zoom, Normal layout (100% zoom level). Best for responsive pages. 50% Zoomed out. . 2.0 200% Zoomed in. Page appears larger.
  • 0.5 - It means 50% zoom out and is half the normal size. Page appears smaller
  • 2.0 - It means 200% Zoomed in and is twice the normal size. Page appears larger.
  • Negative values are ignored.


c. height

This property defines the size of viewport's height in pixels. However, its almost never used in modern responsive design because: Most devices handle height dynamically based on the content and screen orientation.

Its value can be a positive integer or the text device-height.



d. maximum-scale

The maximum-scale property specifies the maximum level user can pinch-to-zoom on a webpage in a mobile browser. User cannot zoom beyond the maximum-scale level. It must be greater than or equal to minimum-scale.

  • Its Minimum value is 0.1.
  • Its Maximum value is 10.
  • Its Default value is 10
  • Negative values are ignored

Example:The user can zoom in up to 2x (200%). They cannot zoom in beyond 2x. 


<meta name="viewport" content="width=1024, maximum-scale=2.0" >


e. minimum-scale

The minimum-scale property sets the lowest zoom level that a user can zoom out to when using a touch device. User cannot zoom below the minimum-scale level. It must be smaller than or equal to maximum-scale.

  • Its Minimum value is 0.1.
  • Its Maximum value is 10.
  • Its Default value is 0.1
  • Negative values are ignored.

Example:The user can zoom out to 50% 


<meta name="viewport" content="width=1024, minimum-scale=0.5" >


f. user-scalable

The user-scalable controls whether users can manually zoom (pinch-to-zoom or double-tap) or not on a page in a touch device. It specifies whether the user can zoom the webpage or not. The allowed values are yes or no.

  • yes - Users can zoom(default).
  • no - Users cannot zoom.

Example:This disables the ability for users to zoom in or out. 


<meta name="viewport" content="width=1024, user-scalable=no" >


g. interactive-widget

The interactive-widget property controls how browsers adjust the viewport size when an on-screen keyboard or other interactive widgets appear (like virtual keyboards on mobile devices).

When you focus on an input field (like a search box), the on-screen keyboard may appear and either: Resize the viewport (so the page shifts up and no content is hidden), or overlay on top of the content (so the page stays the same, but the keyboard overlaps). interactive-widget lets you control which behavior happens.

  • resizes-visual - The visual viewport gets resized by the interactive widget(like keyboaord).
  • resizes-content - The viewport gets resized.
  • overlays-content - Neither the viewport nor the visual viewport gets resized while the interactive-widget overlays content.

Frequently Asked Questions (FAQ)

What is the Viewport in HTML?
The viewport is the visible area of a web page on a user's device screen. It’s the rectangular portion of the web page that is displayed inside the browser window.
In simple terms: The viewport = The part of the page you can see without scrolling.

Different devices have different viewport sizes:
  • A desktop browser has a wide viewport
  • A smartphone has a much narrower viewport
Without proper settings, web pages might not display correctly on smaller screens like phones or tablets. That’s why developers use the <meta name="viewport"> tag in HTML to control how a page scales and adjusts to the size of the screen.

What is the difference between the viewport and screen size?
Feature Viewport Screen Size
Definition The visible area of a webpage within the browser window The physical size of a device’s screen
Measurement CSS pixels Device pixels (hardware pixels)
Controlled by <meta name="viewport"> tag in HTML Device hardware (fixed)
Affects How your website appears and scales on different devices The total number of pixels available on the device
Example Viewport width: 375px on iPhone 12 Screen resolution: 1170×2532 pixels on iPhone 12

What is the purpose of this <meta name="viewport" content="width=device-width, initial-scale=1.0"> HTML tag?
This tag controls how your webpage displays on different devices, especially mobile devices. Here’s what each part means:
  • width=device-width - Sets the viewport width to match the device’s screen width in CSS pixels. This means your page will fit the screen size exactly, without zooming out.
  • initial-scale=1.0 - Sets the initial zoom level when the page first loads. A scale of 1.0 means no zoom—the page appears at its normal size.
Without this tag the browser may assume your site is meant for a large desktop screen. The page might appear zoomed out on small screens (like phones), making text and elements tiny.

Is the <meta name="viewport"> tag really necessary?
Yes, the viewport meta tag is necessary if you want your website to be responsive and look good on all screen sizes—especially on mobile devices.
Scenario With <meta name="viewport"> Without <meta name="viewport">
Layout on Mobile Responsive; adjusts to screen size Zoomed out; content appears small
Text Size Readable, properly scaled Very small, may require zoom
Images & Elements Fit the screen width Overflow screen, may cause horizontal scroll
User Experience Mobile-friendly, responsive Poor; user needs to zoom and scroll
When to Use Always, for responsive design Rarely (desktop-only sites)