Viewport meta tags vs Media Queries?

Question

I would love to know, to optimize your website for Tablets, desktops and smarthpones, what is best to use: Media Queries or the Viewport meta tags? see code:

Answer 1

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.