简体   繁体   中英

Twitter Bootstrap: navbar not resized on orientation change (only with Android's stock browser)

My Twitter Bootstrap mobile page has a fixed-top navbar

<div class="navbar navbar-fixed-top">

I would expect that an orientation change event would trigger a "resize" of the navbar, on a mobile device (a resize event on a desktop does correctly trigger a resize of the navbar). On the right side of the navbar I have a collapsible navbar-toggle, which opens/closes the main menu: when changing orientation from landscape to portrait, the menu button is no more visible, which is a disaster...

The issue can be verified also with the official navbar-fixed-top example (at http://getbootstrap.com/examples/navbar-fixed-top/ ).

I'm using the stock (default) browser on a Samsung Galaxy S3 with Android 4.1.2.

The issue does not occur on iPhone (3) browser.

UPDATE: The issue persists with Android 4.3.

Not sure what you mean. but write up your own CSS with all your Size stuff and add !important after it and before the ; Something like this:

.navbar-whatever {
whateverSizeCode = 0 !important;
whateverSizeCode2 = 0 !important;
}

Put Mobile tags for Twitter Bootstrap. Here is a link for you: http://getbootstrap.com/css/#overview-mobile

Mobile Code for you. Add this in your tag

<!-- Scroll Enabled --> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Scroll Disabled -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Note: Use any one of the two lines.

Also make sure that in your HTML you do this:

<style rel="stylesheet" link="bootstrap.css">
<style rel="stylesheet" link="yourCSS.css">

What this will do is Put your styles and sizes in a way that Bootstrap is read by the code first then your CSS so that it does not override your CSS. Hope so I Helped. Ask me again and be more specific.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM