iOS の safari で GoogleMap を掲載しているウェブサイトを閲覧した際、地図を画面全体まで拡大するとSafariのスクロールができなくなってしまいます。スワイプやピンチなどのイベントが地図内のスクロールとして認識されてしまい、ウェブページ自体の縮小やスクロールなどができず操作不能になってしまいます。
スマホ対応のウェブサイトに地図を掲載する場合に、この問題を回避するいい対策はないでしょうか？よろしくご教唆ください。
viewportの設定でページを拡大禁止にする。
ご返答ありがとうございます。
viewportの設定で拡大縮小やスクロールを禁止すると、今度は地図の操作ができなくなってしまうのではないでしょうか。地図のスケールボタンやスクロールボタンを別途配置する方法も考えたのですが、せっかくのスワイプ地図操作ができなくなって昔のGoogleマップみたいなUIになってしまいやや残念です。他に何かいい方法はないものでしょうか？
いや、地図のスワイプ操作はできますよ。というかご自身で試してしまうのが早いと思いますが^^;
試してみました！これなら、地図の周りにスペースを儲けておけば、ブラウザ側のスクロールもできますね！ありがとうございます。
ただし、レスポンシブサイトで地図の幅を100%にして、画面一杯に地図を表示してまうと、いずれにしてもブラウザのスクロールはできなくなっちゃうみたいです… それと、地図の拡大縮小が今度はできなくなりますね。それは別途拡大縮小のボタンを付けてなんとかするしかないものでしょうか…？
みんなの回答 1 件
viewportの設定でページを拡大禁止にする。
関連するトピックス