Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 520
SnakeDoc Avatar asked Jul 29 '16 18:07

SnakeDoc


People also ask

What is breakpoint resolution?

Resolution breakpoints are used to adjust the "weight" of the relative unit em to different common resolutions.

What is a device breakpoint?

CSS breakpoints are the points added in the code, the website content responds to these points depending on the device screen size. This helps in displaying an ideal layout to the end-user.

What is a good breakpoint for a mobile phone?

The responsive breakpoints that we recommend building to these days are 360px for mobile, 768px for tablet and 1366px for desktop.


1 Answers

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:

  • A tale of two viewports — part one
  • A tale of two viewports — part two
like image 103
Michael Benjamin Avatar answered Oct 25 '22 17:10

Michael Benjamin