First line determines a character set used for the page.
character_set Specifies the character encoding for the HTML document.
UTF-8 - Character encoding for Unicode
ISO-8859-1 - Character encoding for the Latin alphabet
In theory, any character encoding can be used, but no browser understands all of them. The more widely a character encoding is used, the better the chance that a browser will understand it.
To view all available character encodings, look at IANA character sets.
Second line is for support of certain versions of Internet Explorer.
Depending upon what Microsoft browsers you support you may not need to continue using the X-UA-Compatible tag. If you need to support IE 9 or IE 8, then I would recommend using the tag. If you only support the latest browsers (IE 11 and/or Edge) then I would consider dropping this tag altogether.
Third line The viewport meta element is what turns a regular website page into a responsive page …
<meta name="viewport" content="width=device-width,initial-scale=1">.
This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).
Hope this clears this up for you.
Glad I could help you out.