tenshi-datenshi-majitenshi
@tenshi-datenshi-majitenshi

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

iOSのSafariでwindow.innerHeightの値がページを開く度に変わる

解決したいこと

この問題がiPhone/Safariのバグなのか、PGバグなのかを切り分けたい。

発生している問題・エラー

サイト初期表示時のwindow.innerHeightの値が安定しません。
具体的には、iPhone8使用時で553が返却される時と555が返却される時があります。

これが原因かはわかりませんが、top: 0;指定のコンテンツと検索バーとの間に1pxほどの隙間が表示されてしまうことがあります。
余白表示時のwindow.innerHeight553
余白なしで正しく表示された場合のwindow.innerHeight555
余白ありで表示された後、スクロールをかけたりページ更新をすると正しい表示になり、window.innerHeightの値も555に変わります。

再現方法

  • iPhone
  • Safari (シングルタブ設定のみ)

他サイトで未確認ですが、管理しているWPサイト2つで同様の事象が確認できました。
URL直接入力でページを表示した場合は再現できません。
Google検索等で別サイトから遷移してきた時のみ再現します。

試したこと

top: 0;がかかっている要素をtop: -10px;などとしてみましたが、0地点より上には動きませんでした。
html側からは動かせない位置に余白があるのではと思っています…

確認していただきたいこと

window.innerHeightの値が違う = ブラウザの認識している画面の高さが違う、
ということだと思うので、ブラウザのバグを疑っているのですが…
この結論付けで良いのかどうか、PGに疑うべき点があるかどうかご教授願いたいです。

0

1Answer

window.outerHeightは変化ありますか?

window.innerHeightはスクロールバーで変化するそうですが、window.outerHeightは影響しません。

支障がなければ、window.outerHeightで代用してはどうでしょう。

0Like

Comments

  1. window.outerHeightは固定で667が返りますが、やりたいことは検索バーのすぐ下(つまりtop:0の位置)に要素を配置したい、なので、代替は難しそうです。

  2. 555-553=2px
    667-553=114px
    この差の2pxの方が114pxの開きの方が重要なのですね?

    top:0の位置に配置できるのでは?
    机上ですみません。

    window.outerHeightもwindow.innerHeightも相対的なものでは?

Your answer might help someone💌