CODEWITHSUNDEEP
cssresponsive-designmedia-queriesviewport
Ty Bailey
Ty Bailey

Reputation: 2432

viewport user-scalable=yes and media queries

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) {}

Upvotes: 4

Views: 21446

Answers (2)

chaitanya chan
chaitanya chan

Reputation: 49

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;

Upvotes: 3

Chris Warnes
Chris Warnes

Reputation: 728

Hi i think this is a misunderstanding about width=device-width the reason for using this is to make your site responsive, but what you are talking about is just a standard site, why don't you try the following

<meta name="viewport" content="width=879">

this will cause the phone/device to view the site using this width initially, you shouldn't need any further viewport declarations for this to work the way you want

Upvotes: 0

Related Questions