デベロッパーツールでは表示されるのに実機（スマホ）で正しく表示されない。

### 前提・実現したいこと

ハンバーガメニューを実装しようとしています。
Chromeのデベロッパーツールでは1枚目の画像のように正しく表示されるのですが、
自分のスマートフォンで確認すると2枚目の画像のようにリストが全て表示されません。
原因がわからないので質問いたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1
2<!-- ナビゲーション -->
3      <div class="inner">
4        <figure><img class="sp_only" src="img/bg_mv_sp.jpg"></figure>
5        <div class="sp_menu"></div>
6        <nav id="gnavi" class="">
7          <ul>
8            <li>
9              <a href="#sec_1">
10                <img class="pc_only" src="img/img_nav_001.png" alt="">
11                <img class="sp_only" src="img/img_nav_001_sp.png" alt="">
12              </a>
13            </li>
14            <li>
15              <a href="#sec_2">
16                <img class="pc_only" src="img/img_nav_002.png" alt="">
17                <img class="sp_only" src="img/img_nav_002_sp.png" alt="">
18              </a>
19            </li>
20            <li>
21              <a href="#sec_3">
22                <img class="pc_only" src="img/img_nav_003.png" alt="">
23                <img class="sp_only" src="img/img_nav_003_sp.png" alt="">
24              </a>
25            </li>
26            <li>
27              <a href="#sec_4">
28                <img class="pc_only" src="img/img_nav_004.png" alt="">
29                <img class="sp_only" src="img/img_nav_004_sp.png" alt="">
30              </a>
31            </li>
32            <li class="nav-last">
33              <a href="#sec_5">
34                <img class="pc_only" src="img/img_nav_005.png" alt="">
35                <img class="sp_only" src="img/img_nav_005_sp.png" alt="">
36              </a>
37            </li>
38
39
40
41

CSS
1.sec_mv .sp_menu {
2    display: block;
3    cursor: pointer;
4    background: url('../img/ico_sp_menu_1.png') no-repeat;
5    background-size: 91% auto;
6    position: fixed;
7    top: 2vw;
8    right: 2vw;
9    width: 49px;
10    height: 37px;
11    z-index: 1001;
12  }
13
14  .sec_mv .sp_menu.active {
15    background: url('../img/ico_sp_menu_2.png') no-repeat;
16    background-size: 58% auto;
17    position: fixed;
18    margin-top: 3vw;
19    margin-right: -1vw;
20    /* width: 39px; */
21    height: 6vh;
22    top: 1.8vw;
23    right: 2.6vw;
24  }

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2021/02/19 11:32

「ちゃんと」「うまくいかない」情報量がゼロの表現なので、具体的に記載（必要に応じて画像やコード）してください。

m.ts10806

2021/02/19 11:42

あと、ファイル別ならコードブロック分けてもらった方が確認もしやすいです。 xxx.html ```html //ここにコード ``` xxx.css ```css //ここにコード ``` みたいに。

退会済みユーザー

2021/02/19 12:48 編集

ビジネスロジックの確認ならまだしも表示に関して、実機とディベロッパーツールは別物と思った方が良いです。 > 自分のスマートフォンで確認するとうまく表示されません。こっちもエスパーじゃないので、実機の話なのに、・機種名は書かない・Android`か`iOS`かも書かない・使用するブラウザも書かないとかではさすがに回答は難しいです。とりあえず、スマホとPCを繋いでデバッグする方法もあるのでその辺を活用してみてはいかがでしょう？ Android / iOSでPC経由で実機テスト・デバッグを行う方法 https://qiita.com/73_ch/items/82347183976da92f778e