100日後に完成するゲームシステム 69日目「Web開発者必見! スマートフォンでダブルタップすると、どうしても拡大してしまう問題について」

2021年4月23日

テクノロジー 特集

t f B! P L
開発をしていると、いろいろな闇にぶち当たって、それを解決することに生きがいを感じている、弓削田です。 ブラウザゲームを作っている時に、当然ながら、スマートフォンの対応が必須になりますが、 PCのGoogleChromeブラウザのデバッグ機能が便利になっても、スマートフォンの実機でしか確認できないことって、 今尚、たくさん存在します。 その中の一つに、スマホのマルチタップ処理と、ピンチインアウトのような処理がありますが、 今回は、ダブルタップをして、スマホの画面が意図していないのに拡大してしまうという問題が、 どこのサイトにも解決方法が書かれていなかったので、自力で解決したという事を残しておきたいと思います。

どういう症状?

スマートフォンのページできちんとレスポンシブデザイン対応がされていて、 サイト内の要素や文字の大きさが、整理されて見やすい状態で表示されているページでは、 通常、拡大処理ができないように、設定されています。 そんなサイトでも、画像などを拡大してみたいという場合においては、 ページ内の画像をクリックすると、画像が別ページになったり、ポップアップして、表示され、その画像は、ピンチインアウトができるように 調整されています。 でも、画面をダブルタップすると、ページが拡大されてしまう症状がどうしても出てしまうんですが、この症状が出る場合と出ない場合があるという 不安定な症状だったのと、 検索して、その対応を試したけど、基本的にどのサイトの説明でも解消しませんでした。 途方にくれちゃいますよね・・・

一般的な解決方法

他のサイトでは、どのような対応方法が書かれていたかというと、
1、metaタグのviewportを指定する。 2、cssで、要素などに、touch-action:manipulation;を設定する。
はい、どれも、全く効果ありませんでした。 確かに、上記方法で一定の解消はしますが、画面内に配置されているいくつかの要素をダブルタップすると、まだまだ拡大されてしまいます。 ということで、上記方法の手段はしておいたほうがいいと思いますが、 これだけで解決はしないという事も合わせて覚えておきましょう。

原因発覚!

手持ちのiphone端末、複数(iOS13とiOS14)で確認したところ、 次の条件の要素をダブルタップすると、画面がその要素に合わせるように拡大されてしまいます。
1. widthが設定されている要素 2. inline要素で、文字が画面いっぱいに表示されていない要素
要するに、普通に表示されている要素で、画面サイズの90%未満のサイズは、全てダブルタップした場合に、 拡大処理が実行されてしまうようだ。 意外と知られていないこの事実、 入力フォームにフォーカスすると、拡大してしまう処理に似ているとも思われる。 これは、文字が画面いっぱいに表示されるブログサイトでは発症せずに、その中にある画像などの要素が画面の一部(90%未満のサイズ) で表示される場合に、発症する自称である。 これに対して、複数の対応方法がある事を見つけたので、まずは簡易なcssだけで対応できるパターンを見てほしい。

cssのみでの対応

拡大してしまう、要素に対して、cssで"pointer-events:none;"をすると、もはやその要素には触ることすらできなくなるので、 拡大することはできなくなる。 ただし、この方法は、入力フォームはもちろんだが、リンク要素やボタン要素などには適用できないので、あくまで表示のみの要素に対して、 簡易に設定できる事と認識してほしい。

jsで対応

スマホのtouchendイベントで、"event.preventDefault();"と実行してあげると、その要素は、その後の処理を実行されなくなる。 ただし、リンクタグで実行すると、リンクがされないので、イベント処理関数内で、aリンクなどの判定をして、 location.hrefで、href属性の指定を付与して上げる必要がある。 少しめんどくさいかもしれないが、とにかく、スマホのタッチ対応をするのは、それだけめんどくさいという事。 ゲームなどの場合は、できるだけ、canvasに統一しておくことで、こんなめんどくさいことをしなくてもいいようになるので、 サイト構成をしっかりと設計することが重要なのかも・・・

このブログを検索

ブログ アーカイブ

QooQ