モバイルWebの5つの小さな不具合(とその修正方法)

あらゆるブレークポイントでレイアウトをテストし、レスポンシブグリッドはきれいに見え、Chrome DevToolsではすべて正常に動作しています。しかし、実際のスマートフォンでサイトを開くと、何かが微妙に、頑固におかしい。これがモバイルWebの小さな不具合(papercuts)です — ページを壊すことはないものの、静かにユーザー体験を低下させる小さなバグです。

ここでは、実際のプロジェクトで繰り返し現れる5つの不具合と、それぞれの最新の修正方法を紹介します。

1. 100vhによるフルハイトレイアウトの崩れ

症状: iOS Safariでフルスクリーンのヒーローセクションやモーダルが少し高すぎて、コンテンツが切り取られたりスクロールバーが表示されたりします。

原因: 100vhはビューポート全体の高さに対して計算され、ブラウザのダイナミックUIクローム(アドレスバーとナビゲーションコントロール)を無視します。これらの要素が表示されているとき、100vhはオーバーフローします。

修正方法: 新しいCSSビューポート単位を使用します。ほとんどのフルハイトレイアウトでは、100svh(small viewport height)がブラウザUIが表示されている状態での表示領域を表すため、安定した選択肢です。ブラウザクロームの表示・非表示に合わせてレイアウトを動的にリサイズしたい場合は100dvhを使用してください。これらの単位の最新ブラウザサポートは広く利用可能で、https://webstatus.dev/features/viewport-unit-variantsで確認できます。

.hero {
  height: 100svh; /* stable default */
}

2. デバイスのセーフエリアに隠れる下部固定UI

症状: スティッキーフッター、ボトムナビゲーションバー、またはアクションボタンが、iPhoneのホームインジケーターや他のデバイスのセーフエリアによって部分的に隠れてしまいます。

原因: bottom: 0で配置された固定要素は、デバイスのセーフエリアではなく、ビューポートの端にぴったり配置されます。ホームインジケーターや角丸を持つデバイスでは、システムUIが要素と重なる可能性があります。

修正方法: metaビューポートタグにviewport-fit=coverを追加し、env(safe-area-inset-bottom)などのCSSセーフエリア環境変数を使用して要素を上に押し上げます。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

3. iOSでフォーム入力欄がズームされる

症状: iOS Safariで<input>をタップすると、ページが予期せずズームインし、レイアウトが崩れます。

原因: iOS Safariは、入力欄のフォントサイズが16px未満の場合、可読性補助として自動的にズームします。

修正方法: すべての入力欄にfont-size: 16px(またはそれ以上)を設定します。user-scalable=noでズームを無効にしないでください — これはアクセシビリティを損ないます。ついでに、inputmodeで適切なキーボードをリクエストし、autocompleteで入力の手間を減らし、enterkeyhintでリターンキーにラベルを付けましょう。

<input
  type="email"
  inputmode="email"
  autocomplete="email"
  enterkeyhint="done"
  style="font-size: 16px;"
/>

4. モーダルやドロワーからスクロールが漏れ出す

症状: ユーザーがモーダルやボトムシート内でスクロールして端に達すると、背後のページもスクロールし始めます。

原因: これはスクロールチェーンです — 子スクロールコンテナが境界に達したとき、ブラウザがスクロールイベントを親に伝播させます。

修正方法: スクロール可能なコンテナにoverscroll-behavior: containを適用します。最新ブラウザのサポートは広範で、Safari 16以降を含みます。詳細はhttps://webstatus.dev/features/overscroll-behaviorで確認できます。

.modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

5. タップターゲットの反応が悪い、または間違った要素が反応する

症状: ボタンの反応が鈍く感じられたり、タップが間違った要素に登録されたりします — 特にナビゲーションメニューやリストなどの密集したUIで顕著です。

原因: 小さすぎるタッチターゲットは、ヒットテストの曖昧さを生み出します。最新ブラウザは(ビューポートmetaタグが正しければ)歴史的な300msの遅延なしでタップイベントを処理しますが、小さすぎるターゲットは依然としてタップの失敗や誤操作を引き起こします。

修正方法: WCAGターゲットサイズ推奨の約44×44 CSSピクセル程度のタッチターゲットを目指してください。レイアウトに影響を与えずにヒットエリアを拡大するには、マージンではなくパディングを使用します。

.nav-link {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

まとめ

これらのモバイルWebの小さな不具合が単独で現れることはほとんどありません — 切り取られるレイアウト、隠れるボタン、ズームするフォーム。それぞれは単独では軽微ですが、まとめて見ると、実機でテストされていないサイトであることを示すサインとなります。最新のCSSは、これらすべてに対処するためのクリーンで標準ベースのツールを提供します。これらの修正を一度適用すれば、ブラウザが進化しても機能し続けます。

よくある質問

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..