iOS で勝手にズームやスクロールがされてしまう問題

  • iOS11 から body 100% で作っても縦方向のスクロールが走ってしまう。
  • ズームさせたくないのにダブルタップするとズームされてしまう。

ズームの抑制は、viewport の設定で対応できないの?

iOS 10 から user-scalable=no が動作しなくなりました。

対応

  • 拡大やスクロールはブラウザが実装している挙動なので preventDefalut を叩けば止めることができます。body や document で bubbling で受けて標準挙動をキャンセルする、といった対応にすれば子要素に影響を与えず、そのままで対応することができます。

  • 現象は iOS10以降から発生するのですが、それより古いバージョンで止めても問題はないだろう、ということで iOS 丸ごと止めます。

  • ダブルタップを preventDefalut (時間は要調整 350msecから500msecぐらい)

  • 2本指の拡大を preventDefalut

  • preventDefalut をコールするので、passive はfalse

対応したコード

ソースについて解説するほどでもないのでリンク貼っておきます。
たいしたものではないのですが、ライブラリにしてみました。

https://github.com/coa00/pizas

メンテするモチベーションが上がるので リポジトリの star くれたら嬉しいです。

雑な文章で申し訳ありません。最近、qiita サボってます。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.