38

I am very new to the world of media queries, and it's clear there's something fundamental I'm missing about the difference between width and device-width -- other than their obvious targeting capacities.

I would like to target both regular computers and devices with the same breakpoints, so I just duplicated all of my min & max width queries to min-device and max-device width queries. For whatever reason, when I add the -device counterparts, my CSS is interpreted very differently by regular computers, and I'm not sure what I'm doing wrong.

You can see the effects here (this is what it SHOULD look like)

And here (after adding -device-width to my queries, my CSS gets screwed up at the smallest width -- the larger resolutions are seen even when the browser width is smaller than what is getting called).

Here are my CSS links -- is there something wrong with my syntax? :

<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css">
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css">
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css">


<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css">
<link rel="stylesheet" media="only screen and (min-width: 1200px) and (max-width: 1299px), only screen and (min-device-width: 1200px) and (max-device-width: 1299px)" href="1200.css">
<link rel="stylesheet" media="only screen and (min-width: 1300px), only screen and (min-device-width: 1300px)" href="1300.css">
Improve this question
3
  • In FF both versions looks exactly the same to me. In what browser and version you have the problems? Commented Mar 7, 2013 at 16:24
  • FF 12. Make sure you drag slowly from the widest to the smallest so it can see the other queries. I see this problem in every browser I tried -- FF, Chrome, etc -- I'm not sure if you're trying it at the smaller widths. Commented Mar 7, 2013 at 16:29
  • Here's screenshots off FF 12 and Chrome 25 swanflighthaven.com/pagestuff/correct.jpg and swanflighthaven.com/pagestuff/incorrect.jpg Commented Mar 7, 2013 at 16:35

2 Answers 2

Reset to default
95

Device-width refers to the display's resolution (eg. the 1024 from 1024x768), while width refers to the width of the browser itself (which will be different from the resolution if the browser isn't maximized). If your resolution is large enough to get you in one break point, but the width of the browser is small enough to get you in another one, you'll end up with an odd combination of both.

Unless you have a legitimate reason to restrict the style sheets based on the resolution and not the size of the viewport, then just use min-width/max-width and avoid min-device-width/max-device-width.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Ahhh. Well that makes perfect sense. Thank you so much for explaining that concisely! I feel idiotic I didn't understand this from the reading I've done. But question: how do I target mobile devices AND computers?
Are all devices targeted (Iphones, Ipads etc) if I skip the device-width?
Because mobile devices typically have their browsers maximized, device-width and width will be the same.
With device width only one images will be downloaded, with window width resizing the window could span a breakpoint then multiple images will be downloaded!
Be careful, device-width is now deprecated. Refer to this answer below.
|
8

device-width is deprecated in Media Queries Level 4. Refer to MDN docs here for more details.

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; Be aware that this feature may cease to work at any time.

So, width and height features should be used to consider the width and height of the viewport respectively.

P.S. These are range features they can be prefixed with min- or max- to express "minimum condition" or "maximum condition" constraints. Reference here.

Improve this answer

1 Comment

I realize this is an old answer, but how would you approach styles for large mobile landscapes (above 760px)? Without using device-width, the mobile landscape styles are still being applied to desktops when I target large mobile phones for landscape styles.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.