Why does device-width work on desktop browser?

Question

I thought device-width only worked on tablets and other mobile devices until today. (Or maybe I was just wrong for a long time...)

.test {
    width: 100px;
    height: 100px;
    padding: 5%;
}

@media only screen and (max-width : 1900px) {
    .test { 
        background: blue;
        color: yellow;
    }
}

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .test { 
        background: #000000; 
        color: #ffffff;
    }
}

<div class="test"> TEST</div>

If I set my monitor resolution as the width 1024x768, the media query below will work.

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/*...*/
}

How can I target tablet and mobile with media queries since device-width can work in desktop browsers?

Answer 1

You could try @media handheld instead of @media screen.

But you might want to reconsider. After all, desktop or not, if the screen size is smaller you might want to show the mobile layout anyway, since your desktop version will probably be optimized for higher resolutions. Desktop-users who are annoyed by this should just buy a bigger screen. ;)