投稿2015/06/07 20:01
このような凄い方達がいるサイトでこのような質問をして良いのか分かりませんが知恵袋やgooなどで質問しても回答がないので宜しくお願いします。
レスポンシブWEBデザインのHTMLテンプレートでホームページを作成しましたがサーバーにアップロードしてスマートフォンで確認するとメニューバー（ナビ）がうまく作動しません。詳しい方是非、教えて下さい。
ＰＣでは画面幅に応じて作動してくれます。
スマートフォンではナビバーが縮小せずに表示されてしまいますので本文が隠れてしまいます。テンプレートはメニューが多かったので5項目にしましたが結局その分が縮小されただけでスマホ画面の半分以上がメニューで覆われてしまう為、本文が見れません。
PCのような作動をさせる為にはどのようにしたらよろしいのでしょうか？
AUのスマホ、Docomoのスマホの両方で確認しましたが同じ結果でしたが、AUの画面幅の広いスマホではうまく作動しました。
言っている意味が分かりにくいかもしれませんがデモページをスマートフォンにて読み込んで頂けると分かると思います。
ダウンロードしたデモページはこちらです↓
http://html5up.net/uploads/demos/helios/
宜しくお願い致します。
ちなみにダウンロードしたサイト（無料）はこちら↓
http://html5up.net/
のHeliosテンプレートをダウンロードしました。
![イメージ説明]WIDTH:320
左画像がPCで画面幅を狭くした状態で右画像がスマホで読み込んだ状態
メニューバーが完全に伸びた状態で縮小する事すらできない。。
回答6件
0
ベストアンサー
コメントに記載しましたが、メニュー部分にvhという単位が使われているのが原因だと思います。
前回の私の回答は無視して下さい。
main.css内にあるvhという単位が使用されている箇所を次の様に変更すると恐らく解決するはずです。
ただ、場当たり的な対応なので元の動作とは異なります。
完全に本来の動作と同じにするには、jQueryで表示領域の高さを取得するなどして対応する必要があります。
lang
1#navPanel { 2 -moz-backface-visibility: hidden; 3 -webkit-backface-visibility: hidden; 4 -ms-backface-visibility: hidden; 5 backface-visibility: hidden; 6 -moz-transform: translateY(-50vh); /* -100%に変更 */ 7 -webkit-transform: translateY(-50vh); /* -100%に変更 */ 8 -ms-transform: translateY(-50vh); /* -100%に変更 */ 9 transform: translateY(-50vh); /* -100%に変更 */ 10 -moz-transition: -moz-transform 0.5s ease; 11 -webkit-transition: -webkit-transform 0.5s ease; 12 -ms-transition: -ms-transform 0.5s ease; 13 transition: transform 0.5s ease; 14 display: block; 15 height: 50vh; /* 10emに変更 */ 16 left: 0; 17 overflow-y: auto; 18 position: fixed; 19 top: 0; 20 width: 100%; 21 z-index: 10002; 22 background: #1f1920; 23 box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.25); 24 font-size: 1em; 25 }
lang
1 body.navPanel-visible #page-wrapper { 2 -moz-transform: translateY(50vh); /* 10emに変更 */ 3 -webkit-transform: translateY(50vh); /* 10emに変更 */ 4 -ms-transform: translateY(50vh); /* 10emに変更 */ 5 transform: translateY(50vh); /* 10emに変更 */ 6 } 7 8 body.navPanel-visible #navButton { 9 -moz-transform: translateY(50vh); /* 10emに変更 */ 10 -webkit-transform: translateY(50vh); /* 10emに変更 */ 11 -ms-transform: translateY(50vh); /* 10emに変更 */ 12 transform: translateY(50vh); /* 10emに変更 */ 13 }
投稿2015/06/08 13:26
総合スコア617
0
これは大きくは関係ないとは思いますが、
http://ikenai-k.info/kireiclub/assets/css/images/overlay.png
この画像が404 not foundになってますのでご確認されてみてください。
また、Androidの場合だと、各メーカーが独自にブラウザを変えてしまうので起きるバグがあります。
もしかしたらそれかもしれません。
先ほど共有されていたurlに私がアクセスしたところ正常に動いているようでした。。。
投稿2015/06/08 11:22
総合スコア1869
0
不明な点がありますが、分かる範囲の事から推測します。
まず、画像左のHeliosのデモページではメニューの開閉ボタンが表示されています。しかし、画像右のkodamaさんのサーバにアップロードしたページにはボタンは表示されていません。
ただ、メニューの項目は表示されているので、JavaScriptは正常に読み込まれているのだと思います。
ここから考えられる原因はCSSかHTMLの不備です。
そしてCSSに手を加えていない場合はHTMLに問題がある可能性が高いです。
メニューの項目を5つに減らしたと仰られているので、その際に手を加えた部分に原因があるのではないかと思います。
まずはタグの閉じ忘れや記述ミスなどが無いか確認してみては如何でしょう。
フラットなメニューであれば次の様な形になるはずです。
lang
1<!-- Nav --> 2<nav id="nav"> 3 <ul> 4 <li><a href="index.html">Home</a></li> 5 <li><a href="menu1.html">Menu 1</a></li> 6 <li><a href="menu2.html">Menu 2</a></li> 7 <li><a href="menu3.html">Menu 3</a></li> 8 <li><a href="menu4.html">Menu 4</a></li> 9 </ul> 10</nav>
追記
お聞きしたいのですが、もしかしてその不具合が発生するスマホというのはiPhoneですか？
そして不具合が発生しない画面幅の広いスマホというのはAndroidでしょうか？
投稿2015/06/08 07:07
編集2015/06/08 09:00総合スコア617
0
ダウンロードして自分のサーバに上げて実機（iphone5）で確認したところ正常に動作しているようです。
もう一度ダウンロードしてみてはいかがでしょうか？？
投稿2015/06/08 06:16
総合スコア1869
0
テンプレートをそのまま必要なところだけいじっていれば，そのようにはならないはずです．
ソースを見ていないので分かりませんが，「≡」ボタンなどのところを消していませんか？
消してしまっていると，動作しません．ぼくも同じ失敗をしたことがあります．
それか，jQueryは読み込んでいますか？
投稿2015/06/08 00:10
総合スコア210
あなたの回答
tips
プレビュー
Q&A
