Почему сайт отображается мелко на мобильном устройстве?

Доброе утро!
Есть такая разметка:

<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12 col-lg-12 text-center">
                <img src="images/logo.png" alt="" height="63" width="231">
            </div>
        </div>
    </div>
    <form action="scripts/register.php" method="POST">
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2 col-centered">
                    <input type="text" name="msisdn" autofocus class="form-control" placeholder="+7">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row" style="padding-top: 15px;">
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2 col-centered">
                    <button type="submit" class="btn btn-info btn-block">Отправить</button>
                </div>
            </div>
        </div>
    </form>
</div>

И немного CSS:

.wrapper {
    padding: 15px;
}

.col-centered{
    float: none;
    margin: 0 auto;
}

Сейчас на десктопе всё отображается норм, но на мобильном устройстве логотип, инпут и кнопка очень мелкие. Как сделать чтобы на мобилке всё отображалось крупно и читабельно?