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

@Media Query use to Response our web site for other devices.
For example this query only works for devices with min 768px width and devices with max 1024px.

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

What is a Media Query? It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Example If the browser window is 600px or smaller, the background color will be lightblue:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

What is the Meta View port???

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

This was not perfect!! But a quick fix.

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

I hope this may help you to understand about meta viewport and @Media query.

Answer 2

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.

.....

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

Answer 3

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.

Answer 4

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.