開発をしていると、いろいろな闇にぶち当たって、それを解決することに生きがいを感じている、弓削田です。
ブラウザゲームを作っている時に、当然ながら、スマートフォンの対応が必須になりますが、
PCのGoogleChromeブラウザのデバッグ機能が便利になっても、スマートフォンの実機でしか確認できないことって、
今尚、たくさん存在します。
その中の一つに、スマホのマルチタップ処理と、ピンチインアウトのような処理がありますが、
今回は、
ダブルタップをして、スマホの画面が意図していないのに拡大してしまうという問題が、
どこのサイトにも解決方法が書かれていなかったので、自力で解決したという事を残しておきたいと思います。
どういう症状？
スマートフォンのページできちんとレスポンシブデザイン対応がされていて、
サイト内の要素や文字の大きさが、整理されて見やすい状態で表示されているページでは、
通常、拡大処理ができないように、設定されています。
そんなサイトでも、画像などを拡大してみたいという場合においては、
ページ内の画像をクリックすると、画像が別ページになったり、ポップアップして、表示され、その画像は、ピンチインアウトができるように
調整されています。
でも、画面をダブルタップすると、ページが拡大されてしまう症状がどうしても出てしまうんですが、この症状が出る場合と出ない場合があるという
不安定な症状だったのと、
検索して、その対応を試したけど、基本的にどのサイトの説明でも解消しませんでした。
途方にくれちゃいますよね・・・
一般的な解決方法
他のサイトでは、どのような対応方法が書かれていたかというと、
１、metaタグのviewportを指定する。
２、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に統一しておくことで、こんなめんどくさいことをしなくてもいいようになるので、
サイト構成をしっかりと設計することが重要なのかも・・・
0 件のコメント:
コメントを投稿