How does bootstrap work on full hd(1920×1080) mobiles?

Question

The Bootstrap tutorial says that include .col-xs-* for mobile devices(<768px). My question is that, if I make a website for small mobiles using .col-xs-* classes then that css rule will be applied only to those devices which have width less than 768px. Nowadays there are full hd mobiles which have width 1080px in 5 inch display. So would these mobile behave as Desktop computer(≥992px) for my bootstrap css? I want my css to be same for any 5 inches screen mobile device, be it HD or Full HD.

Answer 1

TL;DR

CSS pixels are not equal to physical pixels. Let each device/browser figure out how they should display your content, most likely they'll get it right.

Excursion: Bootstraps media-queries

First, let's take a look at how Bootstrap works. Somewhere in a standard bootstrap.css you'll find this code (slightly modified and shortened for the sake of simplicity):

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

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

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

Code bluntly borrowed from the official bootstrap docs.

What resolution does your screen have?

So, how does your browser determine, which media-queries are relevant? Let's assume it has a property I'd like to call magicalWidth for now.

Your browser than compares magicalWidth with @media (min-width: @screen-sm-min) and if magicalWidth is greater than or equal to @screen-sm-min it takes all of the definitions inside { ... } into account, otherwise it just ignores them. The same goes for all other media queries.

Now, what is magicalWidth? I can tell you that it is most likely not the width of your screen or browser window in (physical) pixels. CSS uses the concept of logical pixels to compute any measurement and our magicalWidth from above is exactly the width of your device or browser window in logical pixels. You can pretty easily test this yourself, take a look at the following example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#f00;">Test 1</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#ff0;">Test 2</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0f0;">Test 3</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0ff;">Test 4</div>
</div>

If you look at this at full on your computer and zoom in, you'll notice how the layout changes until all cols are just stacked (i.e. the default behaviour for small displays), even though you didn't change the resolution of your screen or the size of your browser window.

And the same thing applies to your phone: When rendering content, your browser does not use physical pixels, but logical pixels to determine the size of your screen.

Viewport meta-tag

To do that, it creates a virtual viewport, where it renders the content and afterwards scales it to the size of your screen. Now you can decide the size of that viewport with

<meta name="viewport" content="width=...">

... can be a fixed size, for example

<meta name="viewport" content="width=600">

will cause the virtual viewport where everything is rendered to be 600px wide. ... can also be the special size device-width which means the viewport will be as wide as your screen in logical pixels. Bootstrap recommends the following viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

So we have width=device-width. The other part initial-scale=1 means that your page should initially be rendered at a zoom level of 100%.

For a more in-depth explanation, see the MDN article on viewport.

Ratio between physical and logical

There's also a thing called device-pixel-ratio that determines the ratio between the physical and logical pixels. So for example if your phone has a full HD screen and a device-pixel-ratio of 3, its logical resolution will be (1920/3)x(1080/3) = 640x360 and that is well below Bootstraps lowest breakpoint. If device-pixel-ratio is 2, the logical resolution will be 960x540.

btw: You can use device-pixel-ratio also in media queries:

@media (min-device-pixel-ratio:2) { ... }

Bottom line

Use Bootstrap or some other responsive framework or your own media-queries however you like and let each device/browser figure out how they should display your content, most likely they'll get it right (but that doesn't mean you shouldn't run tests to make sure)

Answer 2

If you see carefully bootstrap needs a meta tag named viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

See the usage of this tag in Bootstrap

What If Someone don't use this tag?

Without this meta tag bootstrap will work just like you have explained in your question

Now if you see the meta tag there is a property called width which is being set to device-width.

Now, What is device-width?

When you go to market and buy a HD phone of resolution 1080*1920 then there is also something called device pixel ratio associated with every device( ranges from 1,2,3,4 ans so on increases for HD devices).

 

How is device-width calculated?

device-width is calculated using formula

device-width=real-width / device-pixel-ratio

Device-width sets width of page to logical CSS pixels and comes around 360px or 480px.(voila now every phone is same)

What pixels does media queries use upon which bootstrap is built?

Media queries use CSS pixels which is now changed to something like 360*480.

Without the viewport meta tag there were 1080 CSS pixels in width but with this tag now there are roughly 360 or 480 CSS pixels.

---

For example if you buy a Lenovo K3 Note of resolution 1920*1080 which has device pixel ratio 3 then the device-width will be

1080/3 = 360px

which will be set to width property of viewport meta tag.

Answer 3

5inch could translate to 480px in y axis. Any 5inch display mobile is generally less than 768px. The dimensions does not calculate screen resolution but the actual dimensions. I have a 5inch screen 1080 full hd android phone and also a low resolution android phone of 540x960 pixels and it is a 4.3inch screen which could translate to 412.8px on y axis. and all of them behave in same manner when i use the .col-xs-* bootstrap css.

My verdict

With reference to The answer here and here

my understanding is that the CSS breakpoints rely on the device-width and not the screen resolution.