Help us understand the problem. What is going on with this article?

ウェブページがピンチアウト・ズームされているかどうか検出する方法

スマホやタブレットなどのモバイル端末の UI を実装しているとき、ときどき「今、ユーザーが画面をピンチアウトして拡大表示しているかどうか?」を知りたくなることがあります。

ピンチアウト・ズームされているかどうか検出するコード

1行で済ませられる DOM API があります。Visual Viewport API です。この API に対応している環境では、window オブジェクトの visualViewport プロパティが利用可能です。以下のようなコードを書けば、ピンチズームの検出が可能です。

Android の Chrome と、iOS Safari で対応されています。

function isPinchZooming() {
  return window.visualViewport.scale > 1
}

注意したいのは、iOS が Visual Viewport API に対応したのが Safari 13(2019年9月リリース)だということです。もしそれ以前の環境にも対応する場合、以下のコードでピンチズームを検出できます。

function isPinchZooming () {
  if ('visualViewport' in window) {
    return window.visualViewport.scale > 1
  } else {
    return document.documentElement.clientWidth > window.innerWidth
  }
}

Visual Viewport とは何か?

「ブラウザが現在表示している画面領域」と言い換えられます。タッチ端末が登場する以前は存在しない概念でしたが、Apple が iPhone に「ピンチアウトでブラウザの部分領域を拡大して表示する」新しい操作概念を導入したことで初めて意識されるようになりました。

これに対して、Initial Containing Block (ICB) という言葉があります。名前が示す通り「初期化時における包含ブロック」です。これはモバイル端末においては、meta viewport で指定した width の値を幅として、端末のアスペクト比に準じて高さを算出したものです。いちど確定したら、ページ遷移するまで原則として(ズームしても)変化しません。

上記のコードは、Visual Viewport と ICB の挙動の違いを使ってピンチズーム中かどうかを判別できるようにしたものです。

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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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