What is a viewport? You may have seen the meta-tag named "viewport" on newer mobile-friendly websites. The mobile (iOS) version of Safari introduced the "viewport meta tag" and "scale" on the viewport for mobile (scale optionally being one of the special values minimum-scale, maximum-scale, and user-scalable).
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
A viewport is like a logical window. You are on one side of the window looking through to the website. Sometimes the window (viewport) is big, sometimes you stand close to it. In some cases, you can see all that there is to see in the window, other times the walls around the window block some part of the view.
Confusingly, there are two different viewports, the layout viewport which is the whole rendered web page whether you can see it all or not, and there's the visual viewport which is the window metaphor I used above.
For normal desktop websites viewed on a mobile device the layout viewport will be much bigger than what's visible on the screen and the screen will be zoomed into some main part, as if through a window or camera viewscreen (this is the so-called visual viewport) of the content (text) and the text will be big enough to be legible. On desktops, the viewport will be the size of the browser window.
For this reason, many websites explicitly set the viewport metatag to "width=320, initial-scale=1". A lot of smartphones (iPhones and older Androids) have a width of 320 CSS pixels in their visual viewport (320px width in portrait) and so the mobile website will fit perfectly and will not be zoomed in at first. Trying to solve more problems, by limiting scaling (e.g. setting minimum-scale and maximum-scale both to 1.0 in the meta tag) fixes some problems but can prevent people who need to zoom to view your site to not be able to use your site now.
But a lot of smartphones will say there are more pixels, and what that means is confusing. When it comes to mobile devices and CSS, a pixel is not a pixel. With denser screens (think Retina), there can be more than one hardware pixel for a single CSS pixel.
If that's not confusing enough, consider all the possible "widths" for a web page we now have in CSS: width of the html element, or the body element, the desktop-browser-window-viewport width, etc.
Besides setting a value for viewport width in the meta value, we can use media queries (@media in CSS).
Height works similarly to width but can usually be ignored if you take care of width.