user3523426 user3523426 - 7 days ago 6
CSS Question

Meta viewport has no effect on media query

I am trying to write a functionality enabling users to switch between mobile and desktop layout. I am using media query for differentiation of the layouts:

@media screen and (max-width: 1024px) {
.... some definitions
}


My understanding is, VIEWPORT META tag should affect the media query. So, I think this

<meta name="viewport" content="width=640" />


should cause positive evaluation of my condition

@media screen and (max-width: 1024px)


Unfortunately, it doesn't. Am I wrong? If yes, is there a way, how to affect the media query?

Answer

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).

Comments