Edited at

iOS のズームやスクロールを止める

More than 1 year has passed since last update.


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 サボってます。