본문으로 건너뛰기

Viewport

Viewport

Viewport is the area of the screen where the web page is displayed.

Viewport is an important concept especially in mobile environments and responsive web design, as it adjusts web pages to look correct on devices with various sizes and resolutions.


<meta> Tag

The <meta> tag defines metadata within an HTML document.

Metadata does not appear on the page itself, but provides additional information about the page to browsers and search engines.

The <meta> tag is commonly defined using the name and content attributes.

1. name attribute:

  • Defines the type of metadata.

  • For example, you can specify the author of the document, a description of the page, keywords, etc.

  • Possible values include viewport, description, keywords, author, and others.

2. content attribute:

  • Provides the content or value for that metadata.

  • The value is interpreted according to the type defined in the name attribute.

Example:

Example of using meta tag
<meta name="author" content="CodeFriends" />

Setting the Viewport

Viewport is defined within the HTML <head> tag using the <meta> tag.

Example of viewport setting
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

In the code above, the viewport meta tag's content means the following:

  • width=device-width: Set the width of the webpage to match the screen width of the device

  • initial-scale=1.0: Set the initial zoom level of the webpage to 1 (which means 100% zoom)

With this setup, web pages are displayed appropriately to the mobile device's screen size.


The Importance of Viewport

  1. User Experience: Enhances readability of web pages in mobile environments without the need for zooming in and out.

  2. Design: Optimizes the design of web pages for various devices.

  3. Search Engine Optimization: Web pages optimized for mobile are often scored higher by search engines.