CODEWITHSUNDEEP
htmlviewportmeta-tags
CactusSlat
CactusSlat

Reputation: 17

What is the <meta name="viewport"> tag?

What is

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

Like part by party I want to learn HTML and am using a webpage from a club I joined

Upvotes: 0

Views: 170

Answers (3)

Sumedh Deshpande
Sumedh Deshpande

Reputation: 546

From the MDN Documentation

The browser's viewport is the area of the window in which web content can be seen.

The width property controls the size of the viewport
The initial-scale property controls the zoom level when the page is first loaded.

Note:Always read the Documentation for more info about any concept you find difficult to understand

Upvotes: 0

buondevid
buondevid

Reputation: 716

From W3schools:

HTML5 introduced a method to let web designers take control over the viewport, through the tag.

You should include the following viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

About the meta tag W3schools:

The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.

<meta> tags always go inside the element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the tag (See "Setting The Viewport" example below).

Upvotes: 1

JSmart523
JSmart523

Reputation: 2497

I've found that if there's anything webby that I want to know more about, I can add the word "mdn" to my web searches, and that usually moves the 'mozilla developer network' web site to the top. In this case, searching google for "mdn viewport meta" brings me to https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag which answers your question very well.

P.S. Thanks! I hadn't known what that was either!

Upvotes: 1

Related Questions