iPhone Safariで「画面に収まらない」を解決するまで — wagahi開発の舞台裏
Mark4「iPhone SEでシャッターボタンが画面外に」
あるユーザー様からのご報告がきっかけでした。「iPhone SEでwagahiを開くと、撮影画面のシャッターボタンが画面外に出てしまう」——この一件から、当社はiPhone Safari特有の表示問題と向き合うことになりました。
原因は"100vh"という指定だった
原因は、画面の高さを表現するために使っていた100vhという指定にありました。これは「ブラウザのURLバーが見えていない前提」の値であり、実際に表示できる範囲よりも大きい数値が返ってきてしまっていたのです。iPhone Safariでは、URLバーの表示・非表示によって実際の表示領域が動的に変化するため、固定値である100vhでは正しくレイアウトできない場面が生じます。
"100dvh"への全面移行
解決策として採用したのが、Web標準で新しく導入された100dvh（動的なビューポート高さ）です。これは「URLバーやツールバーを差し引いた、実際に表示できる範囲」を返してくれる現代的な指定です。
- 30ファイルを一括で100vh→100dvhに移行: 撮影画面、チャット画面、各種ダイアログなど、影響範囲すべてに反映
- iPhoneのSafe Area（ノッチや下端バー）も明示対応:
env(safe-area-inset-bottom)を用いて、フルスクリーン時の見切れを解消 - iOS Safari特有の挙動にも個別対応: 表面と裏面が切り替わるTCGカードでは、スクロールできなくなる問題を避けるため、3D描画と通常スクロールの処理を明確に切り分け
「直す」だけで終わらせない
今回の対応は、単発のバグ修正では終わりませんでした。同じ罠を繰り返さないための仕組みづくりにもつなげています。
- すべての画面で100vhの利用を点検する社内ルールを追加
- iOS SafariとAndroid Chromeの両方で動作確認する習慣を、開発フローに組み込み
- 「縦スクロールのbounce」「URLバー連動」など、モバイル特有の挙動をパターン化して文書に残す
開発者としての振り返り
撮影画面、TCGカード、各種ダイアログ——wagahiのどの画面も、iPhoneでもAndroidでも見切れずに表示されるようになりました。ユーザー様のご指摘で発見した不具合でしたが、根本対応によって、次に似た問題が起きる前に気づける体制を一段強化できたと考えています。
本記事は2026年5月時点の情報に基づいています。
著者: 株式会社シーテン — インフラ系から宇宙関連システムまで20年以上の開発経験を持つ技術者集団。2025年より生成AI・AIエージェントを活用したAI駆動開発に本格参入し、自社プロダクト「wagahi」の開発を通じて実践知見を蓄積中。
投稿者プロフィール
