viewport user-scalable=yes and media queries

Question

I took over the build of a website in which was NOT designed to be on mobile devices at all. The client needs to be able to at least navigate through the site via a mobile device so I am trying to make it so the site appears exactly the same on the mobile device as it does on the browser and just let the client pinch and zoom throughout it. I had to make some small adjustments via media queries but that's another story.

The site looks great with <meta name="viewport" content="user-scalable=yes" /> but it doesn't look like any of my media queries are taking effect... When I put width=device-width in the meta tag the site blows up and looks like its displayed at 300% zoom. When I put any of the following initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 I get the same effect I do when I just put width=device-width

So far the only thing that has given me close to what I am looking for is user-scalable=yes alone in the meta tag with nothing else, but the media queries aren't taking effect. Is it required to have width=device-width or initial-scale for media queries?

Here is the one media query I am using that is not taking effect:

@media only screen and (max-width: 879px) {}

Answer 1

bro try this one. i am explaining as per my knowledge but confident enough that it may help u

use meta tag like this

ex:<meta name='viewport' content=' width=device-width, initial-scale=0.1, maximum-scale=1, user-scalable=1'  />

"width=device-width" tells that the width of your viewport is taken by the device's width

hence write media query for device width like this

ex:@media screen and (max-device-width:(your desired) px){}

try varying the given value to initial-scale: ranges from 0.0-1.0;