質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.03%

レスポンシブなのに・・・

解決済

回答 6

投稿

  • 評価
  • クリップ 1
  • VIEW 2,204

kodama

score 11

このような凄い方達がいるサイトでこのような質問をして良いのか分かりませんが知恵袋やgooなどで質問しても回答がないので宜しくお願いします。
レスポンシブWEBデザインのHTMLテンプレートでホームページを作成しましたがサーバーにアップロードしてスマートフォンで確認するとメニューバー(ナビ)がうまく作動しません。詳しい方是非、教えて下さい。
PCでは画面幅に応じて作動してくれます。
スマートフォンではナビバーが縮小せずに表示されてしまいますので本文が隠れてしまいます。テンプレートはメニューが多かったので5項目にしましたが結局その分が縮小されただけでスマホ画面の半分以上がメニューで覆われてしまう為、本文が見れません。
PCのような作動をさせる為にはどのようにしたらよろしいのでしょうか?
AUのスマホ、Docomoのスマホの両方で確認しましたが同じ結果でしたが、AUの画面幅の広いスマホではうまく作動しました。

言っている意味が分かりにくいかもしれませんがデモページをスマートフォンにて読み込んで頂けると分かると思います。
ダウンロードしたデモページはこちらです↓
http://html5up.net/uploads/demos/helios/
宜しくお願い致します。

ちなみにダウンロードしたサイト(無料)はこちら↓
http://html5up.net/
のHeliosテンプレートをダウンロードしました。
イメージ説明左画像がPCで画面幅を狭くした状態で右画像がスマホで読み込んだ状態
メニューバーが完全に伸びた状態で縮小する事すらできない。。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • flat

    2015/06/08 12:39

    > 左画像がPCで画面幅を狭くした状態で右画像がスマホで読み込んだ状態
    画像を見る限りでは左はHeliosのデモページで、右はkodamaさんのサーバにアップロードされたページと見受けられます。
    比較するファイルが異なると原因の特定も困難になるので、Heliosとご自身のページの両方で不具合が出るのか、それともどちらか一方だけなのかを明確にして下さい。

    > AUのスマホ、Docomoのスマホの両方で確認しましたが同じ結果でしたが、AUの画面幅の広いスマホではうまく作動しました。
    主語の無い曖昧な情報は混乱の元となるので「**何が**」同じ結果で、またAUのスマートフォンでは「**何が**」うまく動作したのか明確にして下さい。

    該当する箇所を修正してより分かりやすい文章にすると、回答者も問題を把握しやすくなり回答を得やすくなるはずです。

    キャンセル

回答 6

checkベストアンサー

+1

コメントに記載しましたが、メニュー部分にvhという単位が使われているのが原因だと思います。
前回の私の回答は無視して下さい。
main.css内にあるvhという単位が使用されている箇所を次の様に変更すると恐らく解決するはずです。
ただ、場当たり的な対応なので元の動作とは異なります。
完全に本来の動作と同じにするには、jQueryで表示領域の高さを取得するなどして対応する必要があります。
#navPanel {
                -moz-backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
                -ms-backface-visibility: hidden;
                backface-visibility: hidden;
                -moz-transform: translateY(-50vh); /* -100%に変更 */
                -webkit-transform: translateY(-50vh); /* -100%に変更 */
                -ms-transform: translateY(-50vh); /* -100%に変更 */
                transform: translateY(-50vh); /* -100%に変更 */
                -moz-transition: -moz-transform 0.5s ease;
                -webkit-transition: -webkit-transform 0.5s ease;
                -ms-transition: -ms-transform 0.5s ease;
                transition: transform 0.5s ease;
                display: block;
                height: 50vh; /* 10emに変更 */
                left: 0;
                overflow-y: auto;
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 10002;
                background: #1f1920;
                box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.25);
                font-size: 1em;
            }
            body.navPanel-visible #page-wrapper {
                -moz-transform: translateY(50vh); /* 10emに変更 */
                -webkit-transform: translateY(50vh); /* 10emに変更 */
                -ms-transform: translateY(50vh); /* 10emに変更 */
                transform: translateY(50vh); /* 10emに変更 */
            }

            body.navPanel-visible #navButton {
                -moz-transform: translateY(50vh); /* 10emに変更 */
                -webkit-transform: translateY(50vh); /* 10emに変更 */
                -ms-transform: translateY(50vh); /* 10emに変更 */
                transform: translateY(50vh); /* 10emに変更 */
            }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/09 04:31

    詳しいご回答本当に有難うございます。
    flat様及び、親切にご回答頂いた方々に本当に感謝致します。
    知恵袋やgooでも質問していたのですがこちらのサイトのように素早い回答を得られる事は出来ませんでした。。。
    flat様や回答して頂いた方々のレベルの高さに驚きです。私のような初心者にも優しくそして理解しやすく回答して頂いて本当に素晴らしい方々だと思うとともに私の勉強不足を恥じらうばかりです。これからもこちらのサイトにお世話になる事が多々あるかと思いますが出来ればご指導頂ければと思います。flat様をはじめご回答頂いた皆様、本当に有難うございます。感謝の一言です。すごいです。

    キャンセル

0

テンプレートをそのまま必要なところだけいじっていれば,そのようにはならないはずです.
ソースを見ていないので分かりませんが,「≡」ボタンなどのところを消していませんか?
消してしまっていると,動作しません.ぼくも同じ失敗をしたことがあります.
それか,jQueryは読み込んでいますか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/08 14:04

    ご回答有難うございます。
    何も消しておりませんしjqueryも読み込んでおります。
    pcではデモサイトと同じですので大丈夫だと思うのですが。
    スマホだけ不具合が起こる状態です。
    私も不安に思い本元のデモサンプルをスマホで読み込んだ所、こちらも同じ症状が出ました。
    ただ、私の利用しているスマホよりも画面幅の広いスマホでは正常な作動をします。
    私のスマホが小さい訳ではございませんし。。知人のスマホでも確認してもらったのですがやはり不具合が発生します。
    サイトのurlを掲載しても良いのですが、風俗店のHPです。
    アダルトコンテンツ等の問題もあるかと思い控えているのですが大丈夫なのでしようか?

    キャンセル

  • 2015/06/08 21:42

    もしかして,そちら側のスマホでmedia queryが使えなかったりしませんか?
    もしよかったら,機種とブラウザ,バージョンを教えていただけませんでしょうか.

    キャンセル

  • 2015/06/09 04:40

    hika_pon様無事に解決する事ができました。
    私の知識不足、勉強不足が駄目でした。。
    親切にいち早く回答頂き有難うございました。。
    まだまだ、初心者ですのでこれからもお世話になるかもしれませんがご指導頂ければ有難いです。本当に有難うございました。

    キャンセル

0

イメージ説明
GoogleChrome DeveloperToolではちゃんと動作しているようですけど....


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

不明な点がありますが、分かる範囲の事から推測します。

まず、画像左のHeliosのデモページではメニューの開閉ボタンが表示されています。しかし、画像右のkodamaさんのサーバにアップロードしたページにはボタンは表示されていません。

ただ、メニューの項目は表示されているので、JavaScriptは正常に読み込まれているのだと思います。
ここから考えられる原因はCSSかHTMLの不備です。
そしてCSSに手を加えていない場合はHTMLに問題がある可能性が高いです。

メニューの項目を5つに減らしたと仰られているので、その際に手を加えた部分に原因があるのではないかと思います。
まずはタグの閉じ忘れや記述ミスなどが無いか確認してみては如何でしょう。
フラットなメニューであれば次の様な形になるはずです。

<!-- Nav -->
<nav id="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="menu1.html">Menu 1</a></li>
        <li><a href="menu2.html">Menu 2</a></li>
        <li><a href="menu3.html">Menu 3</a></li>
        <li><a href="menu4.html">Menu 4</a></li>
    </ul>
</nav>

追記
お聞きしたいのですが、もしかしてその不具合が発生するスマホというのはiPhoneですか?
そして不具合が発生しない画面幅の広いスマホというのはAndroidでしょうか?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/08 19:58

    ご回答有難うございます。
    htmlを確認しましたが、問題ないようです。
    スマホですがAndroidです。
    ちなみに、ちゃんと作動したスマホもAndroidです。
    ただ、知人のスマホは最近発売された物らしいです。
    画面幅は少し広いですが...
    何度も言うようですが本家本元のデモサイトは確認できるのですがそちらのサイトも同じ症状が出るのです。。。。
    この際、ペナルティ覚悟でurlを公開します。
    http://ikenai-k.info/kireiclub/制作中のサイトになります。
    宜しくお願いします。

    キャンセル

  • 2015/06/08 20:27

    ご返答下さりありがとうございます。
    CSSのtranslate系に関係するiPhoneの仕様によるものかと思いましたが違うのですね。
    あとはAndroidにもバージョンによって異なるバグがあったりするので、それが関係しているのかもしれません。

    キャンセル

  • 2015/06/08 20:55

    何か解決策はあるものなのでしょうか?

    キャンセル

  • 2015/06/08 21:44

    まず、最初の私の予想は間違いであった様なので忘れて下さい。
    CSSを確認してみたところ、メニュー部分のheightプロパティにvhという画面の表示領域の高さを基準にした単位が使われていました。
    これはAndroid4.4未満ではサポートされていない単位なので、恐らくこれが原因だと思います。
    これから修正する方法を新しい回答に記載しますので確認してみて下さい。

    キャンセル

0

これは大きくは関係ないとは思いますが、
http://ikenai-k.info/kireiclub/assets/css/images/overlay.png
この画像が404 not foundになってますのでご確認されてみてください。

また、Androidの場合だと、各メーカーが独自にブラウザを変えてしまうので起きるバグがあります。
もしかしたらそれかもしれません。

先ほど共有されていたurlに私がアクセスしたところ正常に動いているようでした。。。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/08 20:46

    早速のご回答有難うございます。ご指摘のあった
    http://ikenai-k.info/kireiclub/assets/css/images/overlay.png
    ですがダウンロードしたファイルにも元々入ってないようです。。。
    各メーカーが独自にブラウザを変えてしまうので起きるバグ???
    何か対処方はあるのでしょうか?
    宜しくお願い致します。

    キャンセル

  • 2015/06/08 21:27

    んーー
    ダウンロードしたファイルにないのは困りましたね。。。

    はい。
    各メーカー(sonyやpanasonicと言ったメーカーです)が「うちのケータイの方がブラウザとかで表示するのすごく早いんだよ!」など言いたいがために独自に少しブラウザの中身を変えてしまうんです。
    その時に起きた不具合がAndroidで起きるバグの原因の場合もあります。

    正直ここからは実際にソースコードをみて「どのCSSがバグを起こしているか」「実際の機種でそのバグが起きるという報告がネット上にあるか」などの検証を詳しく行う必要があるのでなんとも言えないです。

    もしかしたらもっと初歩的なものかもしれないですし。。。
    みなさんも同じだと思いますが、自分の端末で再現できないのが一番厳しいです。。。

    キャンセル

  • 2015/06/09 04:34

    色々、お手数をお掛け致しましたが無事解決する事ができました。
    MasakazuFukami様ご協力頂き本当に有難うございました。
    これからもお世話になる事があるかもしれませんが、その時は是非、宜しくお願い致します、本当に有難うございました。

    キャンセル

-1

ダウンロードして自分のサーバに上げて実機(iphone5)で確認したところ正常に動作しているようです。
もう一度ダウンロードしてみてはいかがでしょうか??

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/08 20:03

    ご回答有難うございます。iPhoneでは私も確認してないのですが、本家本元のデモサイトもうまく動作しますでしょうか?Androidでは本元のデモサイトも不具合が起こりますので。。。宜しくお願いします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる