This question already has answers here:
Responsive website zoomed out to full width on mobile
(4 answers)
Closed 4 years ago.
In chrome dev tools I get mobile view, but live bootstrap just seems to give me mini version of site
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" content="chrome=1">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/home-slider.css">
</head>
<body>
<div class="container-fluid">
<div class="row content">
<div class="col-xs-12 col-sm-3 sidenav">
<div class="navbar-header navbar navbar-default">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<div id="logo-div">
<img id="tri-img" src="src/dist/image/...jpg" alt="logo" />
</div>
<h4 id="title">Title</h4>
<h4 id="subtitle">Subtitle</h4>
<ul class="nav">
<li><span class="liner">Home</span></li>
<li class="port-main-title">Portfolio<span class="caret arrow"></span></li>
<li>Profile</li>
<li>Process</li>
<li>Contact</li>
</ul><br>
</div>
</div>
<!-- begin carousel -->
<div class="col-xs-12 col-sm-9">
<div id="carousel" class="carousel carousel-fade" data-ride="carousel-fade" data-interval="5000" data-pause="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item img-responsive center-block active">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button">
<span class="glyphicon glyphicon-chevron-leftt" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button">
<span class="glyphicon glyphicon-chevron-rightt" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--/ carousel -->
</div>
<!-- / carousel -->
</div>
</div>
<script type="text/javascript">
$(function() {
$('#myCarousel').carousel();
});
</script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
<!-- build:js scripts/main.js -->
<script src="./js/main.js"></script>
<!-- <script src="js/bootsnipp.js" charset="utf-8"></script> -->
<script src="./js/slide.js" charset="utf-8"></script>
</body>
</html>
I've not used bootstrap before and thought I've followed the rules. Again, on my chrome device tools and browser simulators like ipadpeek and responsusimulator it seems to work, but not on live devices like android mobile or tablet?
Remove maximum-scale=1 from the viewport meta tag so it is set to this..
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
I can't seem to figure out why bootstrap 3 doesn't seem to render form-horizontal correctly on smaller screen sizes.
The labels should all be right aligned (not left) and their vertical alignment should be baseline so the text lines up with the inputs.
This does not work when rendered in mobile mode in Chrome on the "Nexus 5" device nor on a true mobile device.
Any ideas as to what I missed / got wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body style="margin-top: 20px">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-7 col-md-5 col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">My Panel Heading</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-5">Test Label</label>
<div class="controls col-xs-7">
<input class="form-control" type="text" placeholder="My Test Value A"/>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-5">Really Long Test Label</label>
<div class="controls col-xs-7">
<input class="form-control" type="text" placeholder="My Test Value B"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Override bootstrap 3.3.6 defaults with this:
#media (min-width: 1px) {
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
}
You need to use col-sm/md/lg to define the column/s
Col-xs-* is for mobile devices correct, but will not display what you want properly.
The webview doesn't understand what html height 100% means its just showing a blank page. However, in mobile browser it works perfectly fine. Can anyone help me? I've gone through a lot of suggestions but none of that worked. As you can see in the code, I've purposely set the html background color as red so that i can see if the html document is indeed on my webview. I don't see any red at all its just pure white.
It only works if i hard set the height and i don't want to do that. My code is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>WhyQ</title>
<link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
html{
margin:0;
padding:0;
height:100%;
min-height:100%;
background-color:red;
position:relative;
}
body {
font-family: 'Titillium Web', sans-serif;
width: 100%;
min-height: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
background-color:red; /*#E9E9E9;*/
position:relative;
}
</style>
</head>
<body style="position:relative">
<div style="overflow-y:hidden" class="container-fluid login-container">
<div class="row" style="height:15%;">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" style="height:13%;">
<div class="col-xs-12 txt-center login-sub-container-whyqLogo full-height"></div>
</div>
<div class="row" style="height:5%;">
<div class="col-xs-12 txt-center"></div>
</div>
<div class="row" style="height:30%;">
<div class="col-xs-12 txt-center login-sub-container-whyqMascot full-height"></div>
</div>
<div class="row" style="height:20%;">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" style="height:16%;">
<div class="col-xs-12 txt-center full-height">
<button type="button" class="btn btn-login btn-md" data-toggle="modal" data-target="#loginModal">LOG IN</button>
TRY IT
</div>
</div>
<!-- Modal -->
<div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-loginForm">
<div class="modal-content modal-content-loginForm">
<div class="modal-body modal-body-loginForm">
<div class="container-fluid">
<div class="row-fluid" style="display:none" id="loginName">
<input class="login-input" id="txt_name" name="txt_name" type="text" required placeholder=" NAME"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_username" name="txt_username" type="text" required placeholder=" EMAIL"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_password" name="txt_password" type="password" required placeholder=" PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPwd2">
<input class="login-input" id="txt_password2" name="txt_password2" type="password" required placeholder=" CONFIRM PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPhone">
<input class="login-input" id="txt_phone" name="txt_phone" type="text" required placeholder=" PHONE NUMBER"><br/><br/>
</div>
<div class="row-fluid">
<img class="icon border-radius-3" src="images/g-icon.png" alt="Google" />
<img class="icon border-radius-3" src="images/f-icon.png" alt="Facebook" />
<button type="button" id="btnRegister" onclick="showRegisterField()" class="btn btn-login-modal btn-sm border-radius-3">SIGN UP</button>
<button type="button" onclick="login()" style="margin-right:10px" class="btn btn-login-modal btn-sm border-radius-3">LOGIN</button>
<!--<button type="button" class="btn btn-login-modal btn-sm border-radius-3"></button>//-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Make sure your webview layout is configured properly:
android:layout_height="match_parent"
If you used wrap_content, the webview itself will shrink to zero so that only blank page is shown.
Showing red in IE and chrome, I could recommend instead of height: 100%; use height:100vh; as this will set the div to 100% of the view port height. a div tag will not automatically take the height of the view port, you must tell it to do so. also removed the following code as position:relative; is for Tgas not the . also removed the height styles from the row tags. you can set that in css but the height should set itself for each row.
html{
margin:0;
padding:0;
}
body {
font-family: 'Titillium Web', sans-serif;
width: 100%;
background-color:red; /*#E9E9E9;*/
}
.cont-height {
height: 100vh;
}
<div class="container-fluid login-container cont-height">
<div class="row" >
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center login-sub-container-whyqLogo full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center login-sub-container-whyqMascot full-height"></div>
</div>
<div class="row">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center full-height">
<button type="button" class="btn btn-login btn-md" data-toggle="modal" data-target="#loginModal">LOG IN</button>
TRY IT
</div>
</div>
<!-- Modal -->
<div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-loginForm">
<div class="modal-content modal-content-loginForm">
<div class="modal-body modal-body-loginForm">
<div class="container-fluid">
<div class="row-fluid" style="display:none" id="loginName">
<input class="login-input" id="txt_name" name="txt_name" type="text" required placeholder=" NAME"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_username" name="txt_username" type="text" required placeholder=" EMAIL"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_password" name="txt_password" type="password" required placeholder=" PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPwd2">
<input class="login-input" id="txt_password2" name="txt_password2" type="password" required placeholder=" CONFIRM PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPhone">
<input class="login-input" id="txt_phone" name="txt_phone" type="text" required placeholder=" PHONE NUMBER"><br/><br/>
</div>
<div class="row-fluid">
<img class="icon border-radius-3" src="images/g-icon.png" alt="Google" />
<img class="icon border-radius-3" src="images/f-icon.png" alt="Facebook" />
<button type="button" id="btnRegister" onclick="showRegisterField()" class="btn btn-login-modal btn-sm border-radius-3">SIGN UP</button>
<button type="button" onclick="login()" style="margin-right:10px" class="btn btn-login-modal btn-sm border-radius-3">LOGIN</button>
<!--<button type="button" class="btn btn-login-modal btn-sm border-radius-3"></button>//-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I had the same problem here:
Android WebView: how to let the css use the entire height w/ position absolute?
I answered my own question, problem was using alignParent instead of match_parent.
I hope that's the problem in your case.
In any case, try to put some borders to your WebView just to see where it actually stops.
I am trying to develop a sample note application. The application includes an index page having two div elements using data-role="page" option. The first page includes two buttons. Clicking on any button should navigate to other div using page transition as slide.
Here is my HTML Code :
<!DOCTYPE HTML>
<html>
<head>
<title>Dbsample</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="css/cordova.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="css/custom-theme.min.css" />
<script type="text/javascript" src="css/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="css/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
body {
margin: 0; /* Setting body margins to 0 to have proper positioning of #container div */
}
/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
$(document).one("mobileinit", function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
</script>
</head>
<body>
<div id="container">
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList">
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="plus">
Add
</a>
</li>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="grid">
Edit
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="editPage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<div data-role="fieldcontain" data-controltype="textinput">
<label for="textinput1" style="margin-top: 2%;">
Title
</label>
<input name="" id="textinput1" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain" data-controltype="textarea">
<label for="textinput2" style="margin-top: 2%; height: 60px;">
Details
</label>
<input name="" id="textinput2" placeholder="" value="" type="text">
</div>
<div style="margin-left: 30%; margin-right: 30%;">
<input type="submit" data-theme="a" value="Submit">
</div>
<div data-theme="a" data-role="footer" data-position="fixed"
style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#homePage" data-transition="slide" data-inline="true" data-theme="b" data-icon="home">
Home
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
But when I tried to run this on avd, it seems like the data transitions were simply ignored.
In logcat it throws an error:
"file:///android_asset/www/index.html: Line 15 : ReferenceError: Can't find variable: $"
Don't know the reason. Any help?
mobileinit event is not getting fired. You need to register the event before jquery mobile is loaded so that as soon as JQM is loaded the event gets fired. Load JQM script after the following script.
<script type="text/javascript">
$(document).one("mobileinit", function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script type="text/javascript" src="css/jquery.mobile-1.3.2.min.js"></script>
Use this one. It should work.
<!DOCTYPE HTML>
<html>
<head>
<title>Dbsample</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
body {
/* Setting body margins to 0 to have proper positioning of #container div */
margin: 0;
}
/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList">
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="plus">
Add
</a>
</li>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="grid">
Edit
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="editPage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<div data-role="fieldcontain" data-controltype="textinput">
<label for="textinput1" style="margin-top: 2%;">
Title
</label>
<input name="" id="textinput1" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain" data-controltype="textarea">
<label for="textinput2" style="margin-top: 2%; height: 60px;">
Details
</label>
<input name="" id="textinput2" placeholder="" value="" type="text">
</div>
<div style="margin-left: 30%; margin-right: 30%;">
<input type="submit" data-theme="a" value="Submit">
</div>
<div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#homePage" data-transition="slide" data-inline="true" data-theme="b" data-icon="home">
Home
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It looks like
$(document).one("mobileinit", function () {
should be:
$(document).on("mobileinit", function () {
I am using phonegap and jquery mobile. my code is given below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=screen.width; initial-scale=1" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="jquery.mobile/phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
<!-- <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
</head>
<body>
<div id="page" data-role="page" data-theme="b">
<div class="ui-btn-corner-top" data-role="header" data-theme="b" >
<h1>Login</h1>
</div>
<div data-role="content">
<div>
<h4>
<label for="userName" style="text-align:center">User Name</label>
</h4>
<input name="userName" type="text" id="userName" value="" data-theme="b" />
</div>
<div>
<h4>
<label for="passwordinput" style="text-align:center">Password</label>
</h4>
<input name="passwordinput" type="password" id="passwordinput" value="" data-theme="b" />
</div>
</div>
<div class="ui-btn-corner-bottom" data-role="footer" data-theme="b">
<h4>Auth Demo</h4>
</div>
</div>
</body>
</html>
But the elements are not populating for the entire screen...it ends in the middle of the screen.
what do i have to do if get it for the entire screen height and width ?
Add the data-position="fixed" attribute to the footer div.
More details here: http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html
May be you could try doing this:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<body>
<div id="page" data-role="page" data-theme="b" style="width:100%; height:100%">
...
</div>
</body>
When I resize my browser window and make it smaller, the navbar nicely creates a collapse menu with a button on the right top corner. When I view the same site on my android phone, the navbar menu is always collapsed and the top right corner button is not visible. How can this be solved? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>My Groundhops</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">My Groundhops</a>
<div class="nav-collapse">
<ul class="nav">
<li>Clubs</li>
<li>Visits</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">Content</div>
</div>
</div>
</body>
</html>
You're probably missing the meta tag required for mobile devices to properly scale.
So stick this in the head section of your page and try again:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
it seems to be a twitter bootstrap issue on opera mobile, it works on the default android browser. So my code seems OK.
https://github.com/twitter/bootstrap/issues/3621