モバイルSafariの下部ナビゲーションバーを強制的にプログラムで表示する方法を教えてください。

Question

私は、Webページの下部にあるCTA（行動を促す）の固定ボタンを持っています。新しいバージョンのiOSでページをスクロールすると、モバイルSafariは下部ナビゲーションバー（バック、フォワード、共有、ブックマーク、および新しいタブボタン付き）を隠します。そのアクションを実行する代わりにCTAボタンをクリックすると、モバイルSafariは下のナビゲーションバーを表示します。解決策として

、私は下のナビゲーションバーフォース・ショーをなかれする探していました。これを行う方法はありますか？モバイルで見るとJack Threads、モバイルサイトではThread Flipの両方が、個々のアイテムを見るときにこれを引き出すことができます。

私は今までこれをリバースエンジニアリングできません。フォースショーがどのように成し遂げられたか誰にでも分かりますか？関連

： Buttons aligned to bottom of page conflict with mobile Safari's menu barと Prevent Mobile Safari from presenting toolbar when bottom of viewport is tapped

Answer 1

私はこの同じ問題を抱えています。私たちはサイトの下部ナビゲーションを実装しようと努めています。画面の下部をタップするとSafariの下部ナビゲーションが開き、ユーザーは2回クリックする必要があるため、Safariは私たちに問題をもたらしています。私たちが思いついた最善の解決策は、ナビゲーションの下に44pxのスペースを追加することでした。これは本当に悪く見えます。私がサファリのナビゲーションを強制的に開いたままにして、本質的に役に立たない空のブロックの代わりにそのスペースを埋めることができればいいと思う。

Answer 2

私は答えを見つけたかもしれないと思います。あなたのコンテンツを設定すると、次のスタイルを持っている：

• height: 100%は
• overflow-y: scrollが（ビューポートを記入し、 下を越えて行くために、コンテンツができます）（あなたは、ビューポートの下にスクロールすることができます。 デフォルト値が表示されています）
• -webkit-overflow-scrolling: touch（任意のスクロール動作を滑らかにする）

が常に表示されるようにSafariでのiOSメニューを強制的に表示されます。そうすれば、Safariメニューを開く代わりに、実際にはボタンのクリックが機能します。

は残念ながら、あなたはそれがiOSのクロム（もwebkitの）上のスクロールを台無しにするので、JavaScriptのブラウザ検出と、このCSSをペアリングする必要があります。 CSSのみを使用してiOS Safariのすべてのバージョンのみをにターゲティングする方法はありません。