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:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

vs

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer 1

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 !!!