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
3
Help us understand the problem. What is going on with this article?
@tsmd

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

More than 1 year has passed since last update.

スマホやタブレットなどのモバイル端末の 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 の挙動の違いを使ってピンチズーム中かどうかを判別できるようにしたものです。

3
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
tsmd
「広め・深め」を目指し日々ぎょーむに励んでいます。投稿頻度は高くありませんが、鮮度が衰えにくく質の良い情報を提供できるようにがんばります。

Comments

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