Viewport Meta Tag

28/11/2021

The viewport in the browser is the area in the window where the web content is viewed.

Viewport Meta Tag

Generally, the screens on which web pages are processed cannot display the entire content, so browsers help us to access the entire content with a scroll bar.

HTML Viewport Meta Tag

*Mobile screen view of the page without a viewport

On devices with narrow screen widths (mobile phones, tablets) all page content is compressed and displayed. For example, if a page with 900px content loads on a 500px wide mobile device, the content appears cramped on the mobile screen. Therefore, users have to zoom in on the screen to view the content.

This view is a way to display non-mobile optimized sites on narrow-width devices. The reason for this issue is that the pages are not optimized for mobile.

Viewport Meta Tag Development

The mechanism mentioned above is obviously not a useful structure for narrow screens (mobile phones, tablets).

In response to this situation, Apple developed the viewport meta tag to be used in iOS Safari for web developers. Even today, many mobile browsers actively use this tag.

Viewport Basics

The use of viewports on websites is generally as follows. It is located at the top of the <head></head> tag in the HTML structure.

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

The width property on the meta tag controls the size of the viewport. This can be a specific number of pixels, such as width=500, or it can be a device-with property that corresponds to 100% of the screen width.

The initial-scale attribute controls the zoom level at the time of initial load.

HTML Viewport Meta Tag

initial-scale=0

HTML Viewport Meta Tag

initial-scale=1

HTML Viewport Meta Tag

initial-scale=2

The maximum-scale, minimum-scale and user-scalable properties control how far the user can zoom in the page.

If you don’t want users to play with the screen scale, you can use the user-scalable=no property.

Note: Using user-scalable=no may cause accessibility problems for visually impaired users.

Viewport Width and Screen Width

It is possible to specify the width field with a specific number in the meta tag.

Example:

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

In fact, this structure should be used if the displayed area needs a minimum of 500 pixels. However, if the screen width is more than 500 pixels, the browser will expand the content to fit the screen with the initial-scale=1 property.

Zoom Level

With maximum-scale and minimum-scale, users’ on-screen zoom capabilities can be restricted. The value ranges of these properties are from 0 to 10.0, the default value for minimum-scale is 0.25 and the default value for maximum-scale is 5.0.