slickスライダーを使用したときにスマートフォンでズームできないという現象がありました。
最初は、viewportの「user-scalable」などが影響しているのかと思いますが違いました。
そしてズームでできない原因はcssにあるということがわかりました。
スマートフォンでズームできなくなる原因
slickを導入するときに下記のようなslickのcssを読み込むと思います。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">このファイルの中に原因のスタイルが含まれています。
それが下記の部分です。
slick.css （修正前）
-ms-touch-action: pan-y;
touch-action: pan-y;slick.css（修正後）
-ms-touch-action: auto;
touch-action: auto;これでズームできるようになりました。
コメント