Why is this Code Important in a Webpage? What's the purpose?

[surajkay19]

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

[PaulOB]

The viewport meta tag is important because without it in place devices will assume a viewport width of 980px and scale your layout to fit in the viewport resulting in a site that is virtually unreadable. Media queries will not work properly without it as they will only react to the 980px width.

The viewport tag was introduced so that you could tell devices to use their device width as the basis of fitting content inside and they assume that you have controlled the layout with media queries to make it fit.

Therefore whether you add the viewport meta tag depends on whether you have made the site responsive or not. Many legacy sites are not responsive and don;t have the viewport meta tag in place and therefore the device shrinks the page in an attempt to make it usable.

Modern sites should be responsive and controlled with media queries so the meta tag is added to allow the media queries to work properly and to control the layout for smaller and larger screens.

You should almost never stop the user from scaling their text though (user-scalabale=“no”) because that means the user cannot pinch and zoom (unless you are building an app where you need to disable pinch and zoom and even then it s doubtful to be a good approach).

This is the viewport tag you should use for genral web design.

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

Once you’ve added the tag the device will use its own viewport width and media queries will work properly and not at an arbitrary 980px width.

More information here.

[TechnoBear]

To answer your other queries:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
http://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do

<meta name="HandheldFriendly" content="true">
http://stackoverflow.com/questions/1988499/meta-tags-for-mobile-should-they-be-used