スマホでトナメ表が隠れる問題

モバイルブラウザがコンテンツを隠す理由

モバイル端末では、ブラウザのアドレスバーは固定された要素ではありません。ユーザーがスクロールすると拡大・縮小し、表示可能なビューポートの高さがリアルタイムで変化します。そのため、固定ピクセル高さを前提に設計されたページは、予告なく上部や下部のセクションが欠けてしまうことがあります。

ポーカートーナメントのスケジュールページでは、これは実用的な問題です。スケジュールは、イベント、バイイン、開始時刻、ストラクチャーがぎっしり並んだリストです。アドレスバーがヘッダーを覆うと、プレイヤーは日付やシリーズ名を確認できません。フッターを覆うと、ナビゲーションリンクやテーブルの最終行を見逃す可能性があります。

ビューポート単位の落とし穴

コンテンツが隠れるよくある原因は、ビューポート高さ単位の使用です。CSSでは 100vh はビューポートの高さを指しますが、モバイルブラウザではアドレスバーが縮小された状態の最大ビューポートを指すことがよくあります。アドレスバーが表示されているとき、実際の表示領域は 100vh より小さくなります。

その結果、フルハイトのレイアウトが表示画面の下にはみ出すことがあります。スティッキーなフィルターバーや「次のページ」コントロールなど、下部に配置された要素がブラウザのUIの下に隠れてしまうのです。

最新のCSSには代替手段があります。dvh などの動的ビューポート単位や、svh などの小ビューポート単位は、変化するビューポートを追従するように設計されています。フルスクリーンレイアウトでは、height: 100vh の代わりに min-height: 100dvh を使うのが典型的な修正方法です。

セーフエリアインセット

もう一つの要因は、デバイスのセーフエリアです。多くのスマートフォンには丸みを帯びた角、ノッチ、下部のホームインジケーターがあります。端に近すぎる位置に配置されたコンテンツは、切れたりタップしにくくなったりします。

CSS環境変数 env(safe-area-inset-top)、env(safe-area-inset-bottom)、および左右の対応する値を使うと、レイアウト側でこれらの領域にスペースを確保できます。これらの値に基づいてパディングを追加すれば、重要なコントロールを使える領域内に収められます。

トーナメントスケジュールでは、これはスティッキーヘッダー、下部ナビゲーションバー、および次の日やページに進むボタンで最も重要になります。

スケジュールページの実践的なチェック

• デスクトップのエミュレーターだけでなく、アドレスバーを展開した状態と縮小した状態の両方でページをテストする。
• 長いイベントテーブルの最初と最後の行に到達できるか確認する。
• ビューポートが縮んだときに、スティッキー要素がリストの内容に重ならないことを確認する。
• 下端付近のタップターゲットが完全に表示され、クリック可能であることを確認する。
• 文字サイズと行の高さを見直し、ズームなしで密集したスケジュール行が読みやすい状態を保つ。

ポーカー玩家にとってなぜ重要か

トーナメントスケジュールは時間との勝負だ。ハンドの合間にスマホでスケジュールを確認するプレイヤーは、開始時刻、バイイン額、レイトレジストの締め切りを素早く見つける必要がある。アドレスバーが該当の行やナビゲーションを隠してしまえば、ページは本来の役割を果たせない。

優れたモバイル設計は、専用のスケジュールページを必要としない。実際のビューポートに反応し、セーフエリアを尊重し、最も重要な情報を常に表示し続けるレイアウトが求められる。実機でのテストが、プレイヤーより先にこうした問題を発見する最も確実な方法だ。