lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroHtmlChapter4Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

# Viewport

The `viewport` refers to the visible area of a web page on a display screen.

Viewport is an essential concept, especially in mobile environments and responsive web design, helping to ensure web pages appear correctly across devices of varying sizes and resolutions.

 

## `<meta>` Tag

The viewport is defined using a `meta tag`. A meta tag specifies metadata for an HTML document.

Although metadata isn't visible on the page itself, it provides additional information to browsers and search engines about the page.

A meta tag defines metadata with the `name` and `content` attributes.

### name Attribute

- It defines the type of metadata.

- For example, you can specify viewport, page description, keywords, etc.

 

### content Attribute

- It specifies the content or value of the relevant metadata.

- This value is interpreted according to the type defined in the `name` attribute.

 

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

 

## Setting the Viewport

You define the `viewport` using a `<meta>` tag within the HTML `<head>` section.

```html title="Example of setting 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 webpage to match the device’s screen width

- *initial-scale=1.0* : Sets the initial zoom level of the webpage to 1 (100% zoom)

With this setting, the webpage will appropriately fit the screen size of mobile devices.

 

## Why is the Viewport Important?

Without needing to zoom in or out, it enhances the readability of a webpage in a mobile environment.

An optimized mobile webpage can also receive higher scores from search engines.

The `initial-scale` property of the viewport sets the initial zoom level when the webpage is loaded. `1.0` means 100% zoom, displaying the page at the same size as the device's width.

Viewport

<meta> Tag

name Attribute

content Attribute

Setting the Viewport

Why is the Viewport Important?

What does initial-scale=1.0 in the Viewport mean?

`<meta>` Tag

What does `initial-scale=1.0` in the Viewport mean?