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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

3回答

10155閲覧

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

MiiiRiyu

総合スコア30

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1グッド

0クリップ

投稿2019/05/03 14:53

編集2019/05/14 06:53

お世話になっております。
フッター領域の、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の仕様です。
そこが大体ではありますが、ディスプレイ最下部です。目安になるかと思います。

| 通常時
通常時

| ズレ時
ズレ

s8_chu👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2019/05/14 04:37

動く前と、動いた後のキャプチャをください。 iPhone SafariのUI上、防ぐのが不可能な場合があるように思えます。
LanHma

2019/05/14 06:00

実際にコードで試してみたのですが、問題なく下についているように感じます。もし、safariのUIのことを言っているのであれば、難しいと思います。
MiiiRiyu

2019/05/14 06:26

>miyabi_takatsukさん コメントありがとうございます。 症状が出てるのは、知人のiphoneなのですが、頼んでみます。 >LanHmaさん コメントありがとうございます! そうなのですね!UIというのは仕様上ということでしょうか>< 自分もPCではありますが、safariブラウザですと、 問題なく表示されていたり、開発者ツールでもiphoneが問題なく表示されていますので、悩ましいところです・・・
miyabi_takatsuk

2019/05/14 06:33

開発ツールだと、完全に実機と同じ動きとはなりませんからね・・・。 Macをお使いなのであれば、Xcodeをインストールしたら自動で入る、 Simulatorアプリケーションを使い、検証すると、実機とほぼ同じ動きが再現可能です。 実機をお持ちでないなら、そのように検証するといいでしょう。 UI上できないかもとも、それでご理解いただけるかと思います。
MiiiRiyu

2019/05/14 06:55

>miyabi_takatsukさん そうなのですね!詳しく教えていただきありがとうございます! Xcodeというのは耳にしたことはありますが、知識不足なので、 調べて検証のために導入してみます^^ ありがとうございます!とても助かります^^
miyabi_takatsuk

2019/05/14 07:10 編集

追記、大変にありがとうございます。 しかしこれは・・・、本当にキャプチャしたそのままの画像でしょうか? 通常、キャプチャをした場合は、上のアドレスバーや、下のツールバーも映るはずですが。 その部分も含めて、検証が必要なので、どうかご確認お願いします。 そして、このバー付きUIならば、iPhone X系ですね。 しかし、もし、これがキャプチャの全てならば、お使いのブラウザが、iPhone Safariでない可能性があります。 質問本文に、iPhone Xや、iPhone Xsであること、使用してるブラウザも記載をお願いします。
MiiiRiyu

2019/05/14 08:05

おっしゃる通り、全画像ではありません。 どうやら、アドレスは下スクロールにより、消えていたようです。 LINEでアドレスを送って、そのアドレスを開いてもらっていました。 まさかと思い、アドレスをコピペして、 safariのブラウザで開くと確かに、safariとは異なるようでした。 そして、safariだと正常に動きました!! その開いてもらっていたブラウザは下にスクロールする前には、 アドレスが表示されています。 あとは、時計と電池残量などがスクショにうつっていました。 すみませんが、アドレスについては、諸事情により控えています。 使用しているブラウザについては、 アプリ一覧をみさせてもらったのですが、 safari以外には、該当のブラウザアプリらしきものを発見できませんでした。 iphone XRとのことです。
MiiiRiyu

2019/05/14 08:15

ちなみに、上部は画像カットしましたが、下部はカットしていません。 (スクロールバーは表示されていませんでした)
miyabi_takatsuk

2019/05/14 08:20

下部はカットしてないのであれば、上部のアドレスバーの仕様上の高さ変動も原因の可能性があります。 iPhone XRか・・・。 しかし、ほぼほぼiPhone Xと同じ仕様なので、 仕様につき、回避不可の可能性が非常に高いですね。 仮にsafari以外であっても、safariで正常に動いているのであれば、 対応する必要はないかと思います。 (他のブラウザだったとしても、そのブラウザの仕様上回避不可になるかと思われる) これ以上の正確な回答を得るには、キャプチャの表示をしているブラウザを完全に特定する必要があります。
MiiiRiyu

2019/05/14 08:36

なるほどですね! safariにてツールバーでも変動していますし、 アドレスバーの使用上の高さ変動も原因の可能性が高いですね! 確かに、ブラウザの特定が先決ですね。 safariで正常に動作したので、対応が必要ないような気もしますが、 LINEで飛んだ場合は、そのブラウザになる可能性もあるので悩ましいところではありますね・・・
MiiiRiyu

2019/05/14 09:03 編集

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

2019/05/14 09:11

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

回答3

0

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

投稿2019/05/08 14:27

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MiiiRiyu

2019/05/12 14:48

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

2019/05/12 14:53

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

2019/05/12 14:57

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

0

ベストアンサー

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

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

css

1.FixedF_M{ 2 height: 20vw; /* 数値は暫定 */ 3 overflow: hidden; /* はみ出しは非表示にする */ 4 5 display: flex; 6 visibility:hidden; 7 width:100%; 8 position: fixed; 9 left: 0; 10 bottom:0; 11 text-align:center; 12 background-color:black; 13 justify-content: space-around; 14}

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

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

投稿2019/05/14 07:28

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MiiiRiyu

2019/05/14 08:11

詳しく教えていただきありがとうございます! また、おっしゃるとおり、ブラウザが異なるようです。 一体なんのブラウザなのやら・・・ ただ、safariだとうまく固定されました! おっしゃるとおり、 safariだとツールバーの関係で上下に動いてしまうみたいですね! ただ、これは仕様上なので気にならないかもです^^ ありがとうございます!
miyabi_takatsuk

2019/05/14 09:13

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

2019/05/14 09:40

確かに、メインブラウザでもないので対応不要かなと思いますね。 先ほど少し調べていたら、ブラウザ判別で、 リダイレクトによりブラウザ変遷をする方法もあるので、 それが希望通りの動きだったら導入してみようと思います。 当初の質問とはかなりはずれているにも関わらず、 ご丁寧にありがとうございます! safariでは希望通りの動きになりましたので、 こちらの質問は解決済みにしようと思います^^ ありがとうございます!
guest

0

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

投稿2019/05/06 08:36

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MiiiRiyu

2019/05/07 10:10

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

2019/05/08 13:06

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問