CSS Media Query min-width Vs min-device-width with meta viewport

As I was working on responsive UI, the one thing that confused me a lot was the min-width and min-device-width.

@media screen and (min-width : 320px) and (max-width : 480px) { 
    /*Your CSS goes here*/ 
}

This was working properly in my PC browser as: min-width describes the width of the rendering surface of the output device such as the width of the browser window which changes as I resize my PC browser window.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    /*Your CSS goes here*/ 
}

This was working properly in my iPhone Safari browser as: min-device-width describes the width of the output device, meaning the entire screen or page, rather than just the rendering area.

I was googling for only one media query that should work for both: on the resized PC browser and on iPhone's Safari browser. And here is what worked for me - 

The Solution:
Defining <meta name="viewport" content="width=device-width"> in  HTML page resolves the issue with

@media screen and (min-width : 320px) and (max-width : 480px) { 
    /*Your CSS goes here*/ 
}

This meta tag and media query combination works perfectly on PC browser and iPhone's Safari. Here is more on Combining meta viewport and media queries.