実機とchromeなどで検証する画面とレイアウトが違う場合、どうして検証できますか？

Question

実機とchromeなどの検証画面でresponsiveやiphone5などにして見る画面と大分差が生じております。
chromeで見ると全然text-align:centerが効いてますが、
実機のiphone Xとiphone 8で見るとh3要素のtext-align:centerだけが効かず。
他の要素はwidth:100%内に綺麗に治っていますが、
h3要素達だけまるでwidth:100%より広いwidthがあるようにズレて表示されてしまいます・・・！

そして、何度かロードを重ねると正しく表示されたり、また表示が崩れたり・・・
全然基準が分からなくて修正に困っております。

こういう現象に陥ることがある方、是非ともご意見、アドバイスを宜しくお願い致します！

Answer 1

対策のひとつとして、各OSやブラウザ毎の仕様の違いもあるため、「ベンダープレフィックス」等を使って、各OSやブラウザ毎の「CSSハック」を行う方法もあるので、「ベンダープレフィックス」「CSSハック」等で検索してみてください。

---

chromeのデベロッパーツールでの検証と実機での表示では違う事は仕方が無い部分ではあります。あくまでも検証であり実機ではないので。

CSSが効かない場合、キャッシュの確実なクリアやファイルの確認をしてください。修正前のキャッシュが残っている状態や、違うファイルを見て「効かない」と思う方が多いかと思います。

検証している実機の不具合も確率は低いですが見受けられることもあるので、可能であれば複数台での検証をオススメします。