DevToolsのレスポンシブ確認だけでは危険？実機で見つけた表示ズレ

普段、レスポンシブ確認は Chrome DevTools のスマホ表示を使うことが多いのですが、先日、スマホ表示の調整をしていた際に DevTools では問題なかったはずの装飾が、実際にスマホで確認するとズレて表示されていることがありました。

「同じコードなのに、なんで…？」と思いながら原因を追っていくと、absolute配置していた装飾の % 指定が影響していそうでした。

今回は、実際に起きた表示ズレを振り返りながら、原因と修正についてまとめます。

DevToolsでは問題なく見えていた

今回ズレていたのは、absolute配置していた丸い装飾です。

Chrome DevToolsのスマホ表示では、カード右上に綺麗に配置されていました。

（※表示イメージ）

この時点では特に違和感もなく、「問題なさそう」と思ってそのまま作業を進めていました。

実際にスマホで確認すると位置がズレていた

しかし、実際にスマホで確認してみると、同じコードにもかかわらず、丸装飾の位置が下にズレていました。

（※表示イメージ）

最初は、

• キャッシュの影響？
• viewport設定？
• Safari特有の挙動？

なども疑っていたのですが、調べていくうちに、absolute配置していた装飾の % 指定が影響していそうだと気づきました。

使用していたコード

.sample__bg-circle {
  position: absolute;
  top: -300%;
  right: -20%;
}

当時は「画面サイズに対して動いている」感覚で調整していたのですが、top: % は画面サイズではなく、親要素サイズの影響を受けます。

そのため、表示環境によって位置が想定と変わってしまっていたようでした。

px指定に変更すると安定した

最終的には、% 指定ではなく px 指定に変更したことで、スマホで確認しても安定して表示されるようになりました！

.sample__bg-circle {
  position: absolute;
  top: -120px;
  right: -80px;
}

改めて実機確認の大切さを感じた

普段はDevToolsでレスポンシブ確認をすることが多いのですが、今回のように、実際にスマホで見ると見え方が変わるケースもあると改めて感じました。

特に、

– absolute配置
– % 指定
– vw / vh
– transformを使った装飾

などは、表示環境によって見え方が変わることもあるため、DevToolsだけで安心せず、実際のスマホでも確認しておくことが大切です。

改めて、実機確認の重要性を実感した出来事でした。皆様もお気を付けください！