不動産業界特化
転職エージェントLP

通常ブラウザでは問題なく、
アプリ内ブラウザで
表示が崩れた。

Google Pixel で端末の文字サイズを 115% に
設定し、Android版 X のアプリ内ブラウザから
閲覧した場合に、文字の見切れや重なり、
装飾のずれ、横スクロールが発生していました。
通常の Chrome では正常に表示されていたため、
環境と設定が重なったときだけ
起きる崩れでした。

文字だけが拡大され、
固定サイズの枠と
噛み合わなくなっていた。

今回の環境では、端末の設定によって
文字だけが拡大され、固定サイズの枠や
絶対配置した要素との整合性が
崩れていました。すべての Android 端末で
同じ現象が起きるわけではなく、
文字サイズの設定とアプリ内ブラウザの
組み合わせによって現れる崩れだと
考えています。

疑似環境では改善したが、
 実機では別の崩れが発生。

文字サイズに合わせて枠や余白も一緒に拡大されるよう、em を使った調整を試しました。ローカルの疑似環境では横スクロールが解消されましたが、実機では文字とその他の要素で拡大のされ方が異なり、テキストが画像に重なるなど別の表示崩れが発生しました。
そのため em による調整は不採用とし、以降は実機で表示を確認しながら原因を切り分ける方法へ変更しました。

サイズを固定せず、
文字の拡大に追従する
構造へ変えた。

カンプへ完全に合わせることよりも、
文字が拡大されても情報が読める状態を
保つことを基準にしました。
サイズを固定している箇所を、
内容に合わせて伸びる形へ置き換えています。

• 高さを固定せず、内容に応じて伸びる指定へ 文字が拡大しても、
  枠の中で文章が途切れないようにするため。
• 絶対配置していた文章を、通常のフローへ戻す 拡大した分だけ位置がずれて、
  他の要素と重なるのを防ぐため。
• 不要な nowrap と強制改行を減らす 幅が足りないときに、
  折り返して収まる余地を残すため。
• 背景や装飾を、文字に追従する構造へ 文字だけが大きくなっても、
  装飾との位置関係が崩れないようにするため。
• FV のキャッチを約 12% 縮小 拡大した状態でも、最初に見える一文が
  画面内に収まるようにするため。
• 横スクロールの原因箇所にのみ overflow-x: clip ページ全体を制限せず、
  はみ出しが起きている箇所だけを抑えるため。

通常時のデザインを保ったまま、
見切れと横スクロールを
解消した。

修正後、同じ端末・同じ文字サイズの設定で
もう一度確認しました。

• 重要な情報の見切れと重なりを解消
• モデルの顔に文字が重なる状態を解消
• 横スクロールを解消
• 通常の Chrome では
  元のデザインをほぼ維持
• 既存のカルーセル等へ影響がないことを確認

完全一致より、
重要な情報が
読めることを優先する。

すべての環境でカンプと完全に一致させる
ことよりも、重要な情報の可読性を守ることを
優先しました。環境によって多少の差が出ても、
伝えるべき内容が読める状態であることを
合格ラインにしています。

また、疑似環境での確認だけで合格とせず、
実機と挙動が一致しているかを確かめること、
必要に応じて検証方法そのものを見直すことの
重要性を学びました。