2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ios safariでviewportがずれる

Last updated at Posted at 2019-08-08

表題の通り
基本的には、"iOS safari 9.2 で window.innerWidth と viewport の値がズレる"で解決している内容です。
つまり、iOSでのviewportのサイズ参照はdocument.documentElement.clientWidth, document.documentElement.clientHeight使えというコトですが

私も含めブラウザのサイズ取得にはこれ(stackoverflow)

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);```

をコピペしている方も多いのではないでしょうか。
このままだとmaxの判定でwindow.innerWidth, window.innerHeightが参照されてしまうというバグになります。


この現象は、iOS12.3以降、iPhone6で顕著に現れる様です。
iPhoneのスペック的にdocument.documentElement.client***が
viewportに基づいて更新される前に参照してしまうのが原因ではないかと思われます。
以上
2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?