Search code examples
cssresponsive-designmedia-queriesresolution

How do breakpoints work on modern high resolution devices?

Modern phones and tablets have very high resolutions.

My Galaxy S7 Edge, for example, has a resolution of 1440 x 2560 pixels.

Common breakpoints for mobile devices seems to be around 768 pixels, such as in bootstrap.

Example from bootstrap.css:

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

How is it that my phone displays the "responsive" version of websites even though it's resolution is arguably larger than most desktop monitors? From the example, it would seem my phone would always display the site in "desktop" mode.

Solution

  • From the article A pixel is not a pixel is not a pixel...

    I do know what web developers are interested in, however. They need CSS pixels. That is, the “pixels” that are used in CSS declarations such as width: 300px or font-size: 14px.

    These pixels have nothing to do with the actual pixel density of the device. They’re essentially an abstract construct created specifically for us web developers.

    It’s easiest to explain when we consider zooming. If the user zooms in, an element with width: 300px takes up more and more of the screen, and thus becomes wider and wider when measured in device (physical) pixels. In CSS pixels, however, the width remains 300px, and the zooming effect is created by expanding CSS pixels as much as is needed.

    See also: