CODEWITHSUNDEEP
cssmedia-queriesviewport
SeekingTruth
SeekingTruth

Reputation: 1054

What program can I use to test CSS media queries?

I have a site which needs to scale. In this case we scale from 960 up to look a specific way, but then instead of smooth scaling down, we say anything below 960 must be 480 regardless of device size.

So in the header tags I placed:

<meta name="viewport" content="width=480, initial-scale=1, maximum-scale=1" />

and then in the css I use:

@media only screen and (min-width: 960px){}

and

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

My question is, how can I test this to see that it jumps? I have chrome with the Window Resizer Extension. But I am curious if I am doing this right in terms of the settings I have.

Upvotes: 0

Views: 64

Answers (2)

ACyclingMind
ACyclingMind

Reputation: 35

There's something in between those curly-braces, right ;)

I've had excellent luck testing most media queries in chrome's device-viewer (see image- the thing that looks like a phone on the left).

Chrome's Device-viewer

Upvotes: 1

D.Luss
D.Luss

Reputation: 149

Desktop browser won't help you. Google for website test on mobile devices e.g. http://browserstack.com. They give a trial version.

Upvotes: 2

Related Questions