Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@Locomoko

iOSでWebブラウザを表示したとき、ダブルクリックで画面がズームしないようにする方法

More than 1 year has passed since last update.

はじめに

iOSのWebブラウザ上でダブルタップをすると勝手にズームする現象を発見。
解消する方法を調べました。

試したこと

  1. フォントサイズを「16px」以上にする
  2. トリガーからダブルクリックをクリックに変換する
  3. イベントハンドラのtouchendを利用し、ダブルクリックを検知したらクリックに変換する
    →「3」の方法で解決しました!

1. フォントサイズを 「16px」 以上にする

画面がズームする理由を調べてみたところ、iOSではWebブラウザを表示した際、input要素に指定しているフォントサイズが16pxを下回ると、フォーカス時にズームされるという仕様があることがわかりました。
https://uxcellence.com/2014/fix-ios-input-zoom

テキストボックスに文字を入力するときズームになるケースがこれに該当しますね。
iOSの仕様どおり、フォントサイズを16px以上に設定するとズームしなくなるケースが多いようです。

なお、上記の仕様があることから、以下のように強制的にズームを拒否してはいけません。

NG例
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

今回はダブルクリックによるズームを止めたいので、別の方法を調べました。

2. トリガーからダブルクリックをクリックに変換する

この実装で、ズームはしなくなります。
・・・・が、非活性のボタンでも問答無用で強制クリックする効力を持っているので大変危険です。


document.addEventListener('touchend', function (event) {
  event.preventDefault();
  $(event.target).trigger('click');
}, false);

3. イベントハンドラのtouchendを利用し、ダブルクリックを検知したらクリックに変換する

最終的には、ダブルクリックによる検知を自作して解決しました ^ ^


var isClicked = false;

document.addEventListener('touchend', function (event) {
  if (isClicked) {
    // double click
    if (event.cancelable) {
      event.preventDefault();
    }
    isClicked = false;
  } else {
    // single click
    isClicked = true;
    setTimeout( function() {
      isClicked = false;
    }, 350);
  }
}, false);
  • イベントハンドラのdblclickでダブルクリックを検知することができますが、ダブルクリックの途中でテキストが選択されてしまうことがあるため、今回はtouchendからダブルクリックを検知するように実装しています。
  • mousedownの方がイベントの発火が遅いため良いかと思い実装しましたが、挙動が安定しませんでした。

if (event.cancelable) {
  event.preventDefault();
}
  • 上記のように、イベントがキャンセル可能かを判定してからイベントを中止しないと以下のエラーが出力されるので注意が必要です。

[Intervention]Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

参考
http://js.studio-kingdom.com/javascript/event/cancelable
https://lab.syncer.jp/Web/JavaScript/Snippet/14/
https://qiita.com/ikemai/items/d0f9ada6c8d75cceab67

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Locomoko

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?