CODEWITHSUNDEEP
androidhtmlcsstwitter-bootstrap
Rafael Carrillo
Rafael Carrillo

Reputation: 2883

Android responsive UI webapp

I'm using bootstrap to make a responsive webapp.

I started doing some tests with a navbar and a form in my website, the problem is the navbar in android because is being rendered with full width (like a desktop view) and chrome (for android) shows a zoom and this is not the idea behind the responsive UI.

I also tried on my windows phone and it's rendering correctly, this happends with black berry mission tool for web develop wich emulates a tablet or mobile view.

So the problem now is android...

My code for the navbar is this:

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'vetpet.views.index.showIndex' %}">Vetpet Alpha</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Veterinarias <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="{% url 'crear' %}"><span class="fa fa-plus" style="color:green"></span>Agregar Veterinaria</a></li>
                        <li><a href="{% url 'lista' %}"><span class="fa fa-list " ></span>Listar</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

Upvotes: 0

Views: 118

Answers (1)

Florian
Florian

Reputation: 175

Do you use the bootstrap basic template? http://getbootstrap.com/getting-started/#template

If not, make sure you use the correct viewport settings. Have a look at this page: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Also keep in mind that css calculations are not available in androids default browser before 4.4. But you can use a workaround for this (box-sizing, positive padding, negative margin).

And in case you didn't know, you can use chrome to simulate webkit mobile devices. This also includes touch screen simulation, sensors and so on although it is not a perfect simulation: https://developers.google.com/web/fundamentals/tools/test/emulator

Upvotes: 1

Related Questions