0

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?

Ashley M
  • 1
  • 1
  • tested on IE11, Chrome 39, Firefox31. Nothing happens. What's your browser? – Leo Dec 05 '14 at 07:29
  • Did you change the monitor resolution to 1024x768? Not only change the browser size. I tested on Chrome 39, FF 33.1.1, Safari 5.1.7 and also tested on browserstack – Ashley M Dec 05 '14 at 10:24

1 Answers1

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. ;)

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • Oh please don't. At least for me, it's irritating when you want 3+ windows split vertically, and one of them is a browser. Then the site changes to a (usually bad) mobile layout. – This company is turning evil. Dec 05 '14 at 07:31
  • 1
    Of course. When you change to a mobile layout it'd better be a good one. And if the desktop layout works perfectly in smaller screens, then there is a good argument to only apply the handheld layout to actual handheld devices. – GolezTrol Dec 05 '14 at 07:33
  • Besides, `min-device-width`, in contrast to `min-width`, only responds to actual device width, not the browser window width, so your setup of 3 windows on one wide screen shouldn't be affected by this. – GolezTrol Dec 05 '14 at 07:34
  • Thanks for your response. I tried but it doesn't work on iPad. And it seems not working well in some devices. – Ashley M Dec 05 '14 at 10:26