ハンバーガーメニューがスマホ実機で稼働しない件について

drawer.jsでハンバーガーメニューを作成したのですが、PCの検証ツールでは上手く表示されるのですが、スマホ実機ですと初めから本来メニューアイコンを押した際に開くべき画面が最初からズレて表示されます（上部が隠れた状態）。
色々と試してみましたが、どの方法でも上手くいかずアドバイス頂けましたらと思います。
宜しくお願い致します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <title>hlaada</title>
9  <meta name="description" content="">
10  <link rel="shortcut icon" href="/favicon.ico">
11
12  <!-- reset css -->
13  <link rel="stylesheet" href="./css/reset.css">
14
15  <!-- font awesome -->
16  <script src="https://kit.fontawesome.com/a8d5486348.js" crossorigin="anonymous"></script>
17
18  <!-- drawer.css -->
19  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"
20    media="screen and (max-width: 767px">
21  <!-- jquery & iScroll -->
22  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
23  <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
24  <!-- drawer.js -->
25  <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
26
27  <!-- wow -->
28  <script src="./js/wow.min.js"></script>
29  <link rel="stylesheet" href="./css/animate.css">
30
31  <!-- original -->
32  <link rel="stylesheet" href="./css/style.css">
33  <script src="./js/script.js"></script>
34
35</head>
36
37<body class=" drawer drawer--right">
38
39  <header id="js-header" class="header">
40    <div class="header-inner inner">
41      <h1 class="header-logo"><a href=""><img src="./img/mainlogo.png" alt="hlaada"></a></h1>
42      <button type="button" class="drawer-toggle drawer-hamburger">
43        <span class="sr-only">toggle navigation</span>
44        <span class="drawer-hamburger-icon"></span>
45      </button>
46      <nav class="drawer-nav header-nav">
47        <ul class="drawer-menu header-nav-list">
48          <li class="header-nav-item"><a class="header-nav-item-link" href="#concept">初めての方へ</a></li>
49          <li class="header-nav-item"><a class="header-nav-item-link" href="#menu">メニュー</a></li>
50          <li class="header-nav-item"><a class="header-nav-item-link" href="#shop">店舗情報</a></li>
51          <li class="header-nav-item"><a class="header-nav-item-link" href="#news">ニュース</a></li>
52          <li class="header-nav-item"><a class="header-nav-item-link" href="#contact">ご予約</a></li>
53        </ul>
54      </nav>
55    </div>
56  </header>
57
58  <main class="main">
59    <div class="top inner">
60      <div class="top-picture"></div>
61      <div class="top-message">
62        <p class="top-message-title">タイトルタイトル<br class="is-pc">タイトルタイトル</p>
63        <p class="top-message-text">リードリードリードリードリードリード<br>リードリードリードリードリードリード</p>
64      </div>
65    </div>

SCSS
1@charset "utf-8";
2
3/* =========================================================================================
4# mixins
5========================================================================================== */
6$breakpoints: (
7  //キー : 値
8  'sm': "(max-width: 767px)",
9  'md': "(min-width: 768px)",
10  ) !default;
11
12// メディアクエリ
13@mixin mq($breakpoint: md) {
14  @media #{map-get($breakpoints, $breakpoint)} {
15    @content;
16  }
17}
18
19/* =========================================================================================
20# colors
21========================================================================================== */
22$primary-color: #663300;
23$font-color: #333;
24
25/* =========================================================================================
26# common - 全体に共通するスタイル
27========================================================================================== */
28@include mq('sm') {
29  .is-pc {
30    display: none;
31  }
32}
33
34@include mq('md') {
35  .is-sp {
36    display: none;
37  }
38}
39
40body {
41  font-size: 14px;
42  color: $font-color;
43  font-family: "ヒラギノ明朝 ProN",
44    serif;
45  line-height: 1.6875;
46}
47
48img {
49  width: 100%;
50}
51
52.inner {
53  max-width: 1200px;
54  margin: 0 auto;
55  padding: 0 40px;
56  box-sizing: content-box;
57
58  @include mq('sm') {
59    padding: 0 15px;
60  }
61}
62
63//  main
64// =================================================
65//  common
66// -------------------------------------------------
67.main {
68  padding-top: 65px;
69
70  @include mq('sm') {
71    padding-top: 55px;
72  }
73}
74
75.section {
76  margin-top: 160px;
77
78  @include mq('sm') {
79    margin-top: 96px;
80  }
81}
82
83//  util
84// -------------------------------------------------
85.util-title {
86  font-size: 22px;
87  // font-weight: bold;
88  text-align: center;
89  line-height: 1; //----line-heightで上のマージンが変わってしまうことを防ぐ
90
91  @include mq('sm') {
92    font-size: 22px;
93  }
94
95  &::after {
96    content: "";
97    display: block;
98    height: 1px;
99    width: 60px;
100    background: $primary-color;
101    margin: 16px auto 0;
102  }
103}
104
105.util-link {
106  font-size: 14px;
107  letter-spacing: .1em;
108  color: $primary-color;
109  border: 1px solid $primary-color;
110  background: #fff;
111  display: inline-block;
112  padding: 10px 54px;
113  transition: background-color .4s,
114    color .4s;
115
116  &.-active {
117    background: $primary-color;
118    color: #fff;
119  }
120
121  @include mq('md') {
122    &:not(.-submit) {
123      &:hover {
124        background: $primary-color;
125        color: #fff;
126      }
127    }
128  }
129}
130
131
132
133// header----------------------------------------------------------------------
134.header {
135  background: #fff;
136  position: fixed;
137  top: 0;
138  left: 0;
139  right: 0;
140  z-index: 100;
141
142  .drawer-hamburger {
143    .drawer--right & {
144      top: 5px;
145      right: 3px;
146    }
147  }
148
149
150  .drawer-hamburger-icon {
151    background: $primary-color;
152
153    .drawer-open & {
154      background: transparent;
155    }
156
157    &::before,
158    &::after {
159      background: $primary-color;
160    }
161  }
162}
163
164
165
166.header-inner {
167  display: flex;
168  align-items: center;
169
170  @include mq('sm') {
171    height: 60px;
172  }
173}
174
175.header-logo {
176  display: block;
177  width: 120px;
178}
179
180.header-nav {
181  margin-left: auto;
182
183  @include mq('sm') {
184    top: 60px;
185    background: $primary-color;
186    padding: 24px 0;
187  }
188}
189
190.header-nav-list {
191  @include mq('md') {
192    display: flex;
193  }
194}
195
196.header-nav-item {
197
198  @include mq('md') {
199    &+& {
200      margin-left: 46px;
201    }
202  }
203}
204
205.header-nav-item-link {
206  display: block;
207  color: $font-color;
208  height: 70px;
209  line-height: 70px;
210  letter-spacing: .1em; //-----16px / AV1.6 = 0.1文字分
211
212  @include mq('sm') {
213    color: #fff;
214    font-size: 18px;
215    text-align: right;
216    padding: 0 15px;
217    height: 60px;
218    line-height: 60px;
219  }
220
221  @include mq('md') {
222    transition: color .4s;
223
224    &:hover {
225      color: $primary-color;
226    }
227  }
228}
229
230
231//  top
232// -------------------------------------------------
233.top {
234  position: relative;
235}
236
237.top-picture {
238  @include mq('md') {
239    padding-top: 55%; //-----h660px / w1200pxでブラウザ幅に合わせて画像のアスペクト比を維持したまま拡大縮小
240    background: url(../img/top.jpg) no-repeat top right / 82.5%; //-----990px / 1200px
241  }
242
243  @include mq('sm') {
244    padding-top: 120%; //-----h414px / w345px   
245    background: url(../img/top.jpg) no-repeat center center / cover
246  }
247}
248
249.top-message {
250  @include mq('md') {
251    position: absolute;
252    top: 50%;
253    transform: translateY(-50%
254    );
255  left: 0;
256  background: #fff;
257  padding: 82px 44px 90px 40px;
258}
259
260@include mq('sm') {
261  margin-top: 31px;
262}
263}
264
265.top-message-title {
266  font-size: 26px;
267  font-weight: bold;
268}
269
270.top-message-text {
271  margin-top: 18px;
272}

JQuery
1
2  $(function() {
3    // drawer
4    $('.drawer').drawer();
5
6
7    // smoothscroll
8    $('a[href^="#"]').on('click', function(){
9
10      var header = $('.header').innerHeight();
11      var id = $(this).attr("href");
12      var position = 0;
13      if ( id != '#') {
14        position = $(id).offset().top - header;
15      }
16      $("html, body").animate({
17        scrollTop: position
18      },
19      300);
20    });
21
22
23    // wow
24    new WOW().init();
25
26  });

Lhankor_Mhy

2022/06/09 01:01

drawer.js とはこれですか？ https://git.blivesta.com/drawer/

kamakura85

2022/06/09 04:32

回答ありがとうございます。 drawer.jsはご記載頂いたものになります。

Lhankor_Mhy

2022/06/09 08:16

ご提示のコードを試してみましたが、問題が再現しませんでした。おそらく、ご提示の部分には原因はなさそうに思います。ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。問題再現の手順をもう少し詳しく書いていただけますか？

kamakura85

2022/06/09 10:22

ご親身にありがとうございます。ご迷惑かもしれませんが該当のあるコードの追加と問題の画像を追加させて頂きました。画像の通り、スマホ実機でページを開いた際に本来隠れているべきメニュー部分が現れてしまいます。宜しくお願い致します。

Lhankor_Mhy

2022/06/10 00:50

問題が再現できました。

行動規範の内容に同意します

回答1件

ベストアンサー

typoです。

html
1  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"
2    media="screen and (max-width: 767px">

↓

html
1  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"
2    media="screen and (max-width: 767px)">