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)