chromeデベロッパーツールの検証と実際の見た目が違う

Question

現在webアプリを開発中です。
そして、フロントをhtmlとcssで整えています。
パソコンの大きさでは問題ないのですが、レスポンシブでスマホ用を作るとき、
chromeのデベロッパーツールで見れるものとデプロイしたもので見た目が異なります。
何が原因なのでしょうか。また解決法はありますでしょうか。
何卒宜しくお願いします。

実際の見た目とコードです。

これがpcで見たときです

しかし、自分のアンドロイドで見ると。。。

文字が消えてしまいます。

<nav class="navbar navbar-default navbar-fixed-bottom " role="navigation">
 <div class="row">
  <div class="btn-group btn-group-justified">
    <a href="/" class="btn" >ホーム</a>
    <a href="/user/:id" class="btn">お気に入り</a>
    <a href="/user/:id/comics/rank" class="btn">ランキング</a>
    <a href="/comics/search" class="btn">検索</a>
    <a href="/user/:id/comics/new" class="btn">出品</a>
 </div>
 </div>
</nav>

@media screen and ( max-width:479px )
{
.navbar {
  width: 100%;
  margin: 0 auto;
  padding-right:15px;
  padding-left:15px;
  border-radius:7px;
}

.btn {

display: inline;
font-size:7%;
text-align: center;
width:20%;
  }

.btn-group {
width:100%;
margin: 0 auto;
text-align: center;
  }

}

コードは上記のものです。
サーバーはherokuです。開発はmacです。

Comments

[yoshinavi]

見た目が異なる部分に該当する各コードやスクリーンショット等を提示してもらえれば、皆さんからより良い回答を得れると思います。

[tomoharu]

情報追加しました。よろしくお願いいたします

Answer 1

確認していませんがfont-size:7%;っておかしくないですか？

Comments

[tomoharu]

すみません。そこでした　ありがとうございます！

[yoshinavi]

横からスミマセン。提示コードをPCのみでの検証ですが、画面縮小では点しか見えず、「sousuke」さんご指摘部分を70％にした場合、キチンと表示されていました。

[tomoharu]

ありがとうございます！