Skip to main content
Practice

Viewport

The viewport refers to the visible area of a web page.

The concept of the viewport is especially important for mobile environments and responsive web design, allowing web pages to be properly displayed on devices of various sizes and resolutions.


<meta> Tag​

The viewport is defined using the meta tag. The meta tag specifies the metadata of an HTML document.

Metadata is not visible on the page itself but provides additional information about the page to browsers and search engines.

The meta tag uses the name and content attributes to define metadata.

1. name attribute:

  • Defines the type of metadata.

  • For example, you can specify viewport, description of the page, keywords, etc.


2. content attribute:

  • Specifies the value or content of the metadata.

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


Example of using meta tag
<meta name="description" content="Welcome to CodeFriends" />

Setting the Viewport​

The viewport is defined in the HTML <head> tag using a <meta> tag.

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

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

  • width=device-width: Sets the width of the web page to match the width of the device's screen

  • initial-scale=1.0: Sets the initial zoom level of the web page to 1 (100% zoom)

By setting the viewport like this, the web page will be displayed appropriately according to the screen size of the mobile device.


Importance of the Viewport​

  1. User Experience: Enhances the readability of the web page in a mobile environment, eliminating the need to zoom in or out.

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

  3. Search Engine Optimization: A mobile-optimized web page can receive a higher score from search engines.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.