What units are referenced by responsive web design breakpoints?
<p>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 <strong>rendered pixel resolutions</strong> that we commonly see in device specs. For example, the iPhone 5 at <code>640 x 1136px</code> or the Nexus 5 at <code>1080 x 1920</code>.</p>

<p>But now I’m confused about whether breakpoints are instead meant to reference a device’s <strong>points</strong> (for iOS) or <strong>density-independent pixels</strong> (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 <a href="http://v4-alpha.getbootstrap.com/layout/overview/" rel="nofollow noreferrer">Bootstrap’s documentation</a>: </p>

<pre><code>// 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) { ... }
</code></pre>

<p>But wait a second. The Samsung Galaxy series has a few phones nowadays whose resolutions are <code>1440 x 2560</code>. 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.</p>

<p>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 <a href="https://www.paintcodeapp.com/news/iphone-6-screens-demystified" rel="nofollow noreferrer">rendered pixels</a>, because there’s so much device size diversity in that category alone!</p>

<p>Finally, I also found <a href="https://stackoverflow.com/a/18500871">this kinda related post</a>, which encourages setting the viewport meta tag so that “the screen's width will <strong>match the device independent pixels</strong> 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 <code>px</code>, it could actually be referring to <code>pts</code> or <code>dps</code>?</p>

<p>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 <code>dps</code> and <code>pts</code> relevant only to native development and not responsive web design? <strong>What units exactly are media query breakpoints referencing?</strong></p>