How does bootstrap tell that it is a smartphone

Question

I know how to use bootstrap, but I'd like to understand the functioning. I recently tried getbootstrap.com on a HTC One, screensize something like 1900x1080. The page displayed just one column and the collapsed navigation.

But as the layout on the front page is using col-sm-4, it should switch to a multicolumn layout beyond 768px.

By what means could bootstrap tell, that I was using a smartphone?

Edit: Just came across this thread again by accident. Using alert(screen.width) you get a width which the phone seems to send to the server, which is smaller than the actual pixel size. E.g. my Lumia alerts 403px altough technically it has 720px in vertical position.

BOotstrap does IIRC not know - but bootstrap knows the screen size. It does not really care about smartphone or not ;) — TomTom, Mar 17 '14 at 11:12
If it would not care, then it should display 3 columns, as there is 1080px of space. But it behaves, as if there would be less then 768px! — user2822542, Mar 17 '14 at 13:38
Probably I got your answer wrong: what do you refer to as screen size: the px or the actual size in cm? — user2822542, Mar 17 '14 at 13:41
Pixel. To my knowledge bootstrap goes by media size - pixel size - and switches to a different layout when the resolution (pixels) of the screen have lower than a defined threshhold. Whether this is a smartphone or not is irrelevant. Check http://getbootstrap.com/css/#responsive-utilities - that is the control. Basically there are 4 classes of devices, defined by horizontal resolution. — TomTom, Mar 17 '14 at 13:47
According to that table - should'nt the htc one behave like a "medium device"? But it actually behaves like a "extra small device". — user2822542, Mar 17 '14 at 13:51
Yes, it should. I do not own one and do no ttest for it, so - that is something I can not answer. I would open a ticket on the github page. Check the page for the mobile first tags (http://getbootstrap.com/css/#overview-doctype). — TomTom, Mar 17 '14 at 13:54

score 4 · Answer 1 · edited Mar 24 '19 at 13:56

4

Add this to your HTML head..

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

This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

edited Mar 24 '19 at 13:56

Cœur

37,241
25
195
267

answered Mar 17 '14 at 12:55

Carol Skelly

351,302
90
710
624

score 1 · Answer 2 · edited May 23 '17 at 12:09

I understand you problem, there are another ways to use media in order to detect device

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

device-pixel-ratio for exemple.

You can check the device pixel ratio, in order to detect this kind of device.

Other interresting links : Media queries and device pixel ratio

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

score 1 · Answer 3 · answered Oct 10 '15 at 03:05

This worked for me:

<head>
  <meta name="viewport" content="width=device-width">
</head>

And Bootstrap must have the both alternatives of menu to switch when is smartphone or pc browsers, ex:

<nav class="navbar navbar-inverse ng-scope" role="navigation" >
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#not-google-plus-nav">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"><b>Objetos Perdidos</b></a>
    </div> <!-- ./navbar-header -->

    <div class="collapse navbar-collapse" id="not-google-plus-nav">
      <ul class="nav navbar-nav pull-right">

          <li><a href="/+admin">+admin</a></li>
          <li><a href="/+admin/settings">Mi Cuenta</a></li>
          <li><a href="/register">Registrar Usuario</a></li>
          <li><a href="javascript:void(0)" ng-click="vm.logout()">Salir</a></li>

      </ul>
    </div> <!-- /.collapse.navbar-collapse -->
  </div> <!-- /.container-fluid -->
</nav>

The "navbar-toggle collapsed" button will be shown in smartphones instead of the normal menu

score 0 · Answer 4 · answered Mar 17 '14 at 10:59

Bootstrap uses media queries. Check out the @media sections in the bootstrap.css file.

@media(max-width:767px){--some CSS--}
@media(min-width:768px){--some CSS--}
@media(min-width:992px){--some CSS--}
@media(min-width:1200px){--some CSS--}

Here's the section from the documentation that explains the same. Also, here's the link (MDN) that I'd recommend if you want to use media queries.

score 0 · Answer 5 · answered Mar 17 '14 at 13:49

0

It does not. BOotstrap responsive design is based on the horizontal resolution of the rendering port - not even screeen (I get the same behavior when I resize the browser smaller).

http://getbootstrap.com/css/#responsive-utilities

has some definitions here. This basically is the Bootstrap responsive design, putting devices into 4 categories based on the horizontal number of pixels available. Nothing says "this is a phone" it only ASSUME it is a phone if the resolution is below 768 px.

answered Mar 17 '14 at 13:49

TomTom

61,059
10
88
148

I give it one more try: the htc one is NOT below 768, it is beyond!!!!! But it behaves like it WOULD be smaller then 768. So in my logic there must be something else which tells the css NOT to use what is inside of @media (min-width: 768px) {} – user2822542 Mar 17 '14 at 14:13

How does bootstrap tell that it is a smartphone

5 Answers5