iPhoneXのレスポンシブ対応について

Question

iPhoneXのレスポンシブ対応について、質問です。
実機で見ると、どうもcssがうまく効いていなかったり、横幅を認識していないかのようなことがあるようです。
何か解決策はあるのでしょうか。。？

状況下記にまとめました。

▼問題点
・iPhoneXで、縦向きは幅はiPhone6と変わらないはずなのに、
文字のずれなどがあり、うまくmarginが効いていないところがある。

・横向けにしてから縦に戻すと幅を認識してないようで、うまく戻らない

・一度拡大してから、元に戻すと、また幅を認識してないかのようで、
marginが効いておらず、文字のずれなどがある。

iPhoneXに必要だという「viewport-fit=cover」は設定しています。
また、chromeの検証ツールで見てもズレはなく、実機でみると問題が起こっています。

何か特別な設定が必要なのか調べてもわからず、
質問させていただきました。

Comments

[thyda.eiqau]

「してないかのよう」とのことですが、憶測ではなく実際に適切なスタイルシートが適用されているかの確認をされたほうがよいと思います。iPhone実機のSafariで表示している内容をMacのSafariでinspectionできます。

[thyda.eiqau]

あと、その状況が再現できるコードのご提示がないとなんとも言えない（回答者も憶測で喋ることになって正確性に欠けるし時間も余計にかかる）ので、問題のHTMLとCSSをご提示ください

[Fumika8]

おっしゃるとおりですね、あいまいな質問でした。
少し整理してまた質問させていただきます。

Answer 1

iphoneXにはsafe-areaなるものがあるため、iphone6と画面サイズが一緒でもそのsafe-area分、画面サイズは小さくなると思われます
https://qiita.com/usagimaru/items/761e9a5f3d78b1939df8

恐らくですが、それが原因では?