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

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

ただいまの
回答率

88.80%

iphoneだとfixedフッターが固定されない

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,444

MiiiRiyu

score 27

お世話になっております。
フッター領域の、fixedメニューについての質問です。

androidだと希望通りに固定されていますが、
iphoneだとスクロールしたときに、fixedフッターメニューが上下に動きます。

iphoneでも画面下部で固定されたままにしたいです。

【以下、HTML全文】

<html Lang="ja">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width">

    <!--************ noindex ************-->
    <meta name=”robots” content=”noindex” />
    <!--*********************************-->

    <link rel="stylesheet" href="style.css">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>


<body>

<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p><p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p><p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>


    <div class="FixedF_M">
        <a href="https://"><i class="fas fa-map-marker-alt"></i><span>MAP</span></a>
        <a href = "tel:080"><i class="fas fa-phone"></i><span>TEL</span></a>
        <a href="#" id="BackTopBtn"><i class="fas fa-arrow-up"></i><span>TOP</span></a>
    </div>   


        <script>
            $(function() {
                 if ((navigator.userAgent.indexOf('iPhone') > 0
                     && navigator.userAgent.indexOf('iPad') == -1)
                     || navigator.userAgent.indexOf('iPod') > 0
                     || navigator.userAgent.indexOf('Android') > 0) {
                         var bH = $('.FixedF_M').height();
                        $('body').css('padding-bottom',bH+'px');
                        $('.FixedF_M').css('visibility','visible');
                    }else{
                        $('.FixedF_M').css('display','none');
                    }
            });
        </script>

</body>
</html>

【以下、CSS全文】

*::before,*::after,
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .4s margin ease-out;
    -moz-transition: .4s margin ease-out;
    -ms-transition: .4s margin ease-out;
    -o-transition: .4s margin ease-out;
    transition: .4s margin ease-out;
}

body {
    margin:0;
}

.FixedF_M{
    display: flex;
    visibility:hidden;
    width:100%;
    position: fixed;
      left: 0;
      bottom:0;
     text-align:center;
    background-color:black;
    justify-content: space-around;
}

.FixedF_M .fa-phone,.fa-arrow-up,.fa-map-marker-alt {
    font-size: 3em;
    color: white;
    padding: 10px;
    transform: scale(-1, 1);
}

.FixedF_M span {
    display: block;
    font-size: 14px;
    text-decoration: none;
    padding-bottom: 5px;
}

.FixedF_M a {
    text-decoration: none;
    font-weight: bold;
    color:white;
}

よろしくお願いします。

追記(画像)

本当に一瞬だけの症状なので、スクショとるのにけっこう苦戦しました・・・。
(スクショした頃には元の位置に戻ったりするので)

わかりづらい画像ではありますが、伝わると幸いです。

※下のバーはiphoneの仕様です。
そこが大体ではありますが、ディスプレイ最下部です。目安になるかと思います。

| 通常時
通常時

| ズレ時
ズレ

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • MiiiRiyu

    2019/05/14 17:36

    なるほどですね!
    safariにてツールバーでも変動していますし、
    アドレスバーの使用上の高さ変動も原因の可能性が高いですね!

    確かに、ブラウザの特定が先決ですね。
    safariで正常に動作したので、対応が必要ないような気もしますが、
    LINEで飛んだ場合は、そのブラウザになる可能性もあるので悩ましいところではありますね・・・

    キャンセル

  • MiiiRiyu

    2019/05/14 18:02 編集

    ブラウザについてですが、
    どうやら、LINEアプリのブラウザ機能らしいですね。
    LINEは普及していますので、悩ましいところです・・・。

    キャンセル

  • miyabi_takatsuk

    2019/05/14 18:11

    回答の方でコメント返しますね。(ここの使用の仕方から逸脱してきました)

    キャンセル

回答 3

+2

ユニーバーサルセレクタ(*)でtransitionを
すべてに適用させているのが良くないようなので
必要なタグだけに適用するように修正が必要です。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/12 23:48

    お返事ありがとうございます^^
    いっそのこと、transitionを消してみたのですが、ダメでした・・・

    キャンセル

  • 2019/05/12 23:53

    なるほど…
    残念ながら私はここでギブアップです。

    キャンセル

  • 2019/05/12 23:57

    貴重な時間の中、ご回答いただきありがとうございます><

    キャンセル

checkベストアンサー

+1

質問の修正を受け、ある程度の状況が見えてきましたので、回答させていただきます。
可能性は二点です。

・.FixedF_Mに高さを具体的に指定し、overflow: hiddenさせる。

.FixedF_M{
    height: 20vw; /* 数値は暫定 */
    overflow: hidden; /* はみ出しは非表示にする */

    display: flex;
    visibility:hidden;
    width:100%;
    position: fixed;
      left: 0;
      bottom:0;
     text-align:center;
    background-color:black;
    justify-content: space-around;
}


高さを指定していないため、子要素の浮動ボックスモデルが、親からはみ出し、その分が下にでてきている可能性があるため、
まずは、親要素(.FixedF_M)に厳密に高さを指定してください。
これで解決するかもしれません。

・iPhoneのUI(特に下部のツールバー)が原因で、動いてしまう。
これは、スクロールのたびに、ツールバーの高さが変動するためで、
これはiPhone Safari特有の仕様であり、これは開発者側ではコントロールは不可能になります。
また、Safariでなくても、iPhone Google Chromeでも同様の仕様となるため、
ツールバーが原因での上下に動く現象は回避不可能です。
(ただし、JavaScriptで無理やり移動させて動いてない様に見せるのはできるっちゃできる)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/14 17:11

    詳しく教えていただきありがとうございます!
    また、おっしゃるとおり、ブラウザが異なるようです。
    一体なんのブラウザなのやら・・・
    ただ、safariだとうまく固定されました!

    おっしゃるとおり、
    safariだとツールバーの関係で上下に動いてしまうみたいですね!
    ただ、これは仕様上なので気にならないかもです^^
    ありがとうございます!

    キャンセル

  • 2019/05/14 18:13

    LINEのWebViewということですね。

    それであれば、これ以上は対応不要かと思います。
    仕様ということで一蹴できるのであれば、しましょう。
    また、担当営業さんがいるのであれば、仕様上仕方ない旨を説明し、
    対応しない方針で相談されてみてはいかがでしょうか。
    なぜなら、普及しているとはいえ、メインのブラウザではなく、
    あくまでLINE上でURL叩いた時に使用されるものであって、
    対応優先度はかなり低いものであると思うからです。

    なので、あとこの先は、質問者さん次第となります。(対応するかしないかの相談も含め)

    キャンセル

  • 2019/05/14 18:40

    確かに、メインブラウザでもないので対応不要かなと思いますね。

    先ほど少し調べていたら、ブラウザ判別で、
    リダイレクトによりブラウザ変遷をする方法もあるので、
    それが希望通りの動きだったら導入してみようと思います。

    当初の質問とはかなりはずれているにも関わらず、
    ご丁寧にありがとうございます!
    safariでは希望通りの動きになりましたので、
    こちらの質問は解決済みにしようと思います^^
    ありがとうございます!

    キャンセル

+1

iPhoneのiOSのバージョンが書かれていないので
iOSのバージョンが古いか、またはmargin-bottomが原因のため
padding-bottomに修正すると直る可能性があります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/07 19:10

    回答ありがとうございます!

    知人のiphoneのため正確なことはわかりませんが、
    iphone XRと言っていたはずなので、
    比較的、新しいかと思います。
    padding-bottomに変更してみようと思います!
    ありがとうございます^^

    キャンセル

  • 2019/05/08 22:06

    $('body').css('margin-bottom',bH+'px');
    の部分をmargin-bottomから、
    padding-bottomに変更してみましたが、
    スクロールをすると固定されませんでした。

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る