The viewport meta tag is essentially a switch which tells mobile browsers to not provide a default page width of 980px, auto zoomed out, but to instead use the device's CSS pixel dimensions, with a zoom you define with initial-scale. Note that this is not physical pixel dimensions. A mobile device's CSS pixels are the physical resolution divided by the device's devicePixelRatio, which currently can range from 1 to 3.
Examples:
On an iPhone 5s, which has a physical resolution of 1136x640 and a devicePixelRatio of 2, a viewport with "width=device-width" will create a page that only has 320px in portrait and 553px in landscape in CSS pixels.
On a HTC One, which has a physical resolution of 1920x1080 (1080p) and a devicePixelRatio of 3, the page will have only 360px in portrait and 640px in landscape.
On tablets, CSS pixel portrait width can range from 600px on a Nexus 7 and Kindle Fire HDX, to 768px on an iPad mini non-retina, to 800px on a Nexus 10 or Kindle Fire HDX 8.9".
Using a viewport meta tag needs to be done in combination with CSS media queries (or a very flexible design that doesn't use px for sizes) to ensure that your web page design responds to the various screen sizes without breaking.
Hope that helps clarify things a bit - trust me, it's a common misunderstanding.