1

I have a PhoneGap application where I use Bootstarp for layout and styling. The problem is that when I run the application on the Nexus 4 simulator (resolution 768x1280) Bootstrap treats it as desktop and shows the small navbar as a header, instead of the drop down menu oon the right. My index.html header is as follows:

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>

It is mostly what was generated by PhoneGap. My aim is to bring it to this enter image description here

David Rabinowitz
  • 29,904
  • 14
  • 93
  • 125

1 Answers1

1

By default the grid-float-breakpoint (defined in variables.less) is set to 768px. This means show the "desktop" (collapsed) version for all screens with a width of >=768px. As you mention your test screen will be inside this range. So change the @grid-float-breakpoint to something below 768px in variables.less and recompile bootstrap (or use the customizer to do this).

Also read http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/ to see @grid-float-breakpoint does not influence all settings.

To change the dropdowns to their mobile version too, see also https://stackoverflow.com/a/18944192/1596547

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224