Understand Viewport for desktop,Ipad,tablet,cellphone for a site page

I am trying to understand how do we know if the user is coming to the website page from a IPAD DEKTOP or PHONE. I looked at few of the info on the internet but I still don't understand it very well here is what I know: from this Question do <meta name="viewport" content="width=880px, initial-scale=1.0, user-scalable=1;" /> return back what is the width of the device? how do I know which device its on and use that style-sheet?

Solution

You have to use media queries (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to apply different styles. This is how responsive design works. It is not about applying different style sheets for different devices.

A media query could look like this :

p {font-size: 1em;}
@media (min-width: 30em) {
    p {font-size: 1.5em;}
}

Here for devices wider than 30em, the font size will be larger.

meta viewport is not for what you think, it is for setting the viewport width on a mobile device.