using @media queries in CSS for desktop and phone

Question

I am developing a website which will be responsive in that different CSS styles are applied depending on the width of the users' browser.

the method chosen was to use CSS media queries.

my problem is this: when I use the following code

@media screen
and (min-width: 200px)
and (max-width: 800px)
{
    #example
    {
        background: purple;
    }
}

this works when I resize the window on my PC, but is not recognised by my phone whose resolution is within the limits.

perhaps more perculiarly, when I use the following code

@media screen
and (min-device-width: 200px)
and (max-device-width: 800px)
{
    #example
    {
        background: purple;
    }
}

this has the inverse effect: displays on phone, but not on PC.

as far as I have read there is no scope for an "OR" operator for something along the lines of the following to be valid

@media screen
and (
        ((min-width: 200px) and (max-width: 800px))

        | / || / OR

        ((min-device-width: 200px) and (max-device-width: 800px))
    )
{
    #example
    {
        background: purple;
    }
}

so my question is this: is there a way test responsive CSS on both desktop and phone simultaneously?

I have tried so many combinations: using @media only screen, using Android, Firefox and Chrome browsers on the phone, but to no avail, the result is always the same.

The only way I can think to do this at the moment is to create two separate stylesheets, one for desktop and one for phone, but this would mean updating two stylesheets every time I wanted to view changes in the browser, which is impractical and counters the idea of responsiveness.

I looked into using the orientation: landscape/portrait target, but as far as I can make out this would again involve writing two sets of CSS.

One last consideration is that the website is currently using pure CSS; so no javascript, user-agent determination nor server-side scripting at this point in time.

This must be possible so any insights will be appreciated. I'm sure someone will have had the same problem and enlighten me.

Answer 1

Try using a viewport meta tag:

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

Place that into the head section of your page.