I should point out I'm learning reponsive too, so I may not be 100% right.
Viewport and pixel resolution (on mobile devices) are not the same. Consider loading a standard 960px web page on your mobile phone. You can see it all, but if you consider the iPhone does not have 960 pixels in width (portrait); it's resolution is either 320 (iPhone 3, 3G, 3GS) or 640 (4 and up). So why do you see the whole page? It scales, or zooms out of the page to fit it in the viewport. On the iPhone its default width is 980px, hence why pages based on the 960px grid system look fine, you don't need to scroll horizontally, you've even got 10px either side of margin.
So, the default viewport width size is 980px, but the native resolution width is either 320px or 640px depending on the phone model. To add further complexity all iPhones use the same viewport width of 320px. When a page loads and it doesn't cater for mobile devices you're essentially viewing 3 x zoomed out (980 / 320).
Note, by default a mobile device will scale out to its maximum - you can't scale or zoom out anymore. Using the iPhone example you couldn't zoom out beyond 980px. If the page extends beyond 980px you would need to scroll the page horizontally.
If you're looking at a page in default size (980px) and you zoom in on a portion of that page (you could be zooming in to scale at 100%) you're only going to see a section of that page.
Considering mobile devices, unless the webpage you're viewing contains the meta tag below in the head section, it will zoom / scale out of it's default viewport size.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tells the browser that the width of its window should be equal to the device's native viewport width (note, this is not necessarily the same as the native resolution width) and it should scale at 1, or 100%.
I suggest you have a look at Viewport Sizes to reference the device you want to target.
According to the website the Galaxy S4's viewport's dimensions are 360 x 640.
Proof of concept
Create a div, set up 2 styles:
- Background colour blue
- Background colour red with a max width of 360px
View the page on the S4 in portrait and landscape. The div should change colour; in portrait it should be red, landscape it should be blue.
Make sure you include the meta tag above in the head of the document.
From the research around I've done, it's far easier to find native viewport sizes on devices - i.e. when you're looking at the browser window at a scale of 1 / 100%. Finding the default viewport size on devices is harder, but thankfully when you're designing for mobile, it's the native viewport size you'll be most concerned with.
