Viewport Meta Tags Vs Media Queries

Viewport meta tags vs Media Queries?

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

Meta viewport has no effect on media query

My understanding is, VIEWPORT META tag should affect the media query.

Only in browsers that support it. Desktop browsers generally do not.

If you want to allow Desktop browsers to use CSS you normally only want for smaller screens, then your best bet is to use two separate <link> elements and use the media attribute to specify your media queries. Then use JavaScript to change the media queries to match the display (instead of the display to match the media queries).

Media queries on mobile do not work even after the viewport meta tag

I posted this a few months ago and now I realized it was because my screen was zoomed in. If you have this problem, make sure your window is set to 100% zoom.

---

Related Topics