CODEWITHSUNDEEP
viewportmeta-tags
JIBIN BJ
JIBIN BJ

Reputation: 105

What is the use of viewport

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

What is actually happening on put this meta tag to the header?

Upvotes: 0

Views: 1900

Answers (2)

Hezron
Hezron

Reputation: 352

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

A <meta> viewport element 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.

That code only affecting view on mobile browser. You can see difference on mobile browser.

If you put that code into header, your view on any mobile browser will not same like view for desktop. But the view will changes according your device width.

Upvotes: 1

Tony Vincent
Tony Vincent

Reputation: 14272

Mobile Safari introduced the "viewport meta tag" to let web developers control the viewport's size and scale.

Use the viewport meta tag to improve the presentation of your web content. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an Phone or tablet touch-specific web application, then set the width to the width of the device.

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

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

Sources:- MDN, developer.apple

Upvotes: 2

Related Questions