Viewport meta tags vs Media Queries?

It depends what do you want to achieve.

If you want to design for desktop resolution only and have the mobile browser "zoom out"and assume a desktop like resolution than you can use only the viewport meta tags, setting the width to a fixed value.

If you want a true responsive design you should set the viewport meta tags to device-width and use media queries to plan the layout for different resolutions as you have shown in your code.

Both are necessary.

Media queries are used to have different css for different devices its like the if condition for different devices.

Viewport meta tag is to set tell the device to take the width according to this tag. Its like a reset for devices if its not used device will adjust the layout according to its default settings.

UPDATE: from 2020

You'll want a viewport meta tag (always)

<meta name="viewport" content="width=device-width, initial-scale=1">

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

and almost always a few @media break-points

but often (lately) - people try and leverage things with percentage, variable/relative units, flex-box, and auto-fill type grid situations to avoid @media queries

I think that all of those things can just work together for the best results. I like @media queries for many reasons. : ) They are all just tools to use! Stick to the goals - and the right tools will present themselves.

Here's a video that goes over the whole thought process.

And here's an article about the @media rule.

.....

(original answer for back-story)

i would say that every situation is different... and it is not an either / or situation. the viewport meta tag you have up there would make it so that the website will maintain the 1 to 1 ratio which in a lot of cases is good. however, it also is set user-scalable "no" - and that means that the user will not be able to zoom in etc... sometimes the way ipads and other devices change your site is for the best... (depends)

the best method i have found is to use media queries and to choose one of 2 dirrections:

1. start from small and build up
2. start from large and build down

stretch your browser window bigger and bigger (or smaller and smaller) and then when the website gets ugly, (just before) that is your next breakpoint... make the media query there... and repeat. don't pay attention to all of the device sizes --- this way you'll know that no matter what new devices etc come out --- you have engineered it to look nice at every possible size. (when it gets under 320 / i like to just make the site turn into a business card/// better to have readable info for none smart-phones...)

then after all this... test on devices and try out different viewport meta tags.

there are a lot of great articles about it... use keywords like "responsive design" or "adaptive" or "RWD" responsive web design. and good luck !!!