3

When breakpoints are set in CSS for responsive web designs, media queries check the width of a device so that different layouts can be appropriately displayed. As I thought I understood it, the pixel units in the media queries were referencing the rendered pixel resolutions that we commonly see in device specs. For example, the iPhone 5 at 640 x 1136px or the Nexus 5 at 1080 x 1920.

But now I’m confused about whether breakpoints are instead meant to reference a device’s points (for iOS) or density-independent pixels (for Android). This question largely stems from how I’ve often seen common breakpoints referenced, with buckets defined for phones, tablets, and then desktop screens. This, for instance, is from Bootstrap’s documentation: 

// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 544px and up)
@media (min-width: 544px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

But wait a second. The Samsung Galaxy series has a few phones nowadays whose resolutions are 1440 x 2560. With the breakpoints above, these higher-resolution phones would be treated like desktops, wouldn’t they? Even the iPhone 6 Plus would qualify as a desktop. That can’t be right.

And while I know it’s best practice to define breakpoints based on content and not the device, the Bootstrap example is representative of a seemingly widespread idea that there ought to be breakpoints for portrait phones, landscape phones, tablets, and desktops … but a single bucket for all portrait phones doesn’t make sense if we’re talking about rendered pixels, because there’s so much device size diversity in that category alone!

Finally, I also found this kinda related post, which encourages setting the viewport meta tag so that “the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.” (Emphasis is mine.) So to return to the Bootstrap example, even though the unit says px, it could actually be referring to pts or dps?

All of this – plus a parallel investigation of mine into the concept of designing in 1x to 4x for different screen densities – has got me completely spun around on what feels like it ought to be a basic issue. Am I making this out to be more complicated than it is? And dps and pts relevant only to native development and not responsive web design? What units exactly are media query breakpoints referencing?

Community
  • 1
  • 1
in_flight
  • 263
  • 1
  • 10

1 Answers1

3

From the very same post you referenced in your question:

Stack Overflow– “Should I use max-device-width or max-width?”

In terms of media queries, you will probably want to use max-width rather than max-device-width, since max-width will target the viewport (current browser window), whereas max-device-width will target the device's actual full screen size/resolution.

So to answer your question, pixel-based media queries– combined with the correct <meta name=viewport> tag settings –will reference rendered (as opposed to actual) pixels.

Community
  • 1
  • 1
Rafe Goldberg
  • 156
  • 2
  • 10
  • 1
    You can remove the part about em units, it's a confusing standard that has no use anymore since all modern browsers now set the viewport width correctly on zoom. – seahorsepip Aug 23 '16 at 19:55
  • 1
    More info on the em unit: http://stackoverflow.com/questions/609517/why-em-instead-of-px TL;DR It's a unit that scales on the font-size change which is in most cases not needed. The issue (zooming) em solved in the past has been fixed for years. – seahorsepip Aug 23 '16 at 20:01
  • 1
    agreed, ems are a bit off topic– my personal opinion, of course, but removing and updating now per these suggestions! – Rafe Goldberg Aug 30 '16 at 17:33