iPhoneのSafariでページを拡大縮小させない方法

Last update 2018-08-13 5:54 am

iOS10から、iPhoneではページの拡大・縮小を禁止する「user-scalable=no」が無効化されてしまいました。が、ゲームページや使い勝手上、拡大縮小を禁止させたい場合も多々あると思います。
そこで今回はiPhoneのiOS10以降のSafariでも、「ピンチイン・ピンチアウト」「ダブルタップ」「文字の入力時」の3つのパターンの拡大・縮小を禁止する方法を紹介します。
※注意独学で学んだレベルの技術しかないので、おかしい所があればコメントください(本職はトラックドライバーです(笑))

iPhoneで拡大・縮小を禁止するJavaScriptとCSSのソース

手っ取り早くソースだけほしい。という人のために最初に3つのすべての拡大・縮小を禁止するJavaScriptとCSSのソースを紹介しておきます。

<script>
  /* ピッチインピッチアウトによる拡大縮小を禁止 */
  document.documentElement.addEventListener('touchstart', function (e) {
  if (e.touches.length >= 2) {e.preventDefault();}
  }, {passive: false});
  /* ダブルタップによる拡大を禁止 */
  var t = 0;
  document.documentElement.addEventListener('touchend', function (e) {
  var now = new Date().getTime();
  if ((now - t) < 350){
    e.preventDefault();
  }
  t = now;
  }, false);
</script>
<style>
  body , input , textarea , select {
  /* 入力欄にフォーカスが当たっても拡大しない */
    font-size:17px;
  }
</style>

この上のソースを「 body 」タグより上あたりに挿入しておくと、すべてのパターンの拡大・縮小を禁止できます。
また、このJavaScriptとCSSを有効にさせたページも用意したので、スマホで確認してみてください。

ソースの解説

以下、簡単にソースを解説しておきます。

ピンチイン・ピンチアウトによる拡大・縮小を禁止する

ページの拡大縮小の基本は「ピッチイン」「ピッチアウト」ですよね。ちなみに2本の指を広げるように動かす動作を「ピッチアウト」と呼び、ページが拡大されます。
逆に指で画面をつまむようにする動作を「ピッチイン」と呼び、ページが縮小されます。

iPhoneが発売された当初から数年間は、まだまだPC専用サイトが多く、iPhoneのような小さな画面のデバイスでは文字を識別しずらかったのですが・・・・

このようにピッチアウトするとページが拡大され、文字が識別子安くなります。
ただし当然、横へのスクロール作業が必要になってくるので、使い勝手は悪くなります。

なお、現在ではほとんどのサイトがスマホ対応表示になりつつあるので、そもそもピッチアウトが必要なのか疑問です。
まぁ、私のように老眼にかかるとスマホ専用サイトでも文字が小さく感じるようになるんですけれど…。
参照
iPhone用にサイトの幅と画面の幅を合わせるには
 ページの文字を拡大縮小する

touchstart と touches

このピッチアウトによる拡大を防ぐには、ディスプレイへ指が触れた時に生じるイベント「touchstart」をトリガーにします。

document.documentElement.addEventListener('touchstart' , function(e){} , {passive: false} );

このイベントが発生すると、「touches」というプロパティに、ディスプレイに触れている指の数の情報もセットされます。

if (e.touches.length >= 2){ }

それを取り出すのが「 touches.length 」。
ここに「2」もしくは2以上の値が収められていると、2本の指でディスプレイに触れている、ということになります。

preventDefault

次に出てくる「 preventDefault 」は、キャンセル可能なイベントの場合、こいつでキャンセルすることができます。

e.preventDefault();

これで2本指を使って操作するイベントをキャンセルさせています。
【追記 2018.08.12】
iOS11ぐらいから、addEventListener() メソッドの「第3引数」がfalse ではなく、{passive: false} と記述しないと、うまくキャンセルできなくなりました。

ダブルタップによる拡大・縮小を禁止するには

JavaScriptやhtml5などを使ったゲームページで困るのが、ダブルタップで拡大・縮小してしまう点ですよね。
こちらも無効にできます。
この場合、ディスプレイに指が離れるたびにその時の時間を取得し、前回指が離れた時の時間と比較し、350ミリ秒以内（1秒は1000ミリ秒）の場合はイベントをキャンセルしています。

var t = 0;

これが指がディスプレイから離れるたびに時間を入れる変数。
指がディスプレイから離れた時に生じる「 touchend 」というイベントで、時間を取得します。

document.documentElement.addEventListener('touchend' , function(e){} , false);

new Date().getTime()

で、指が離れた時の時間を取得しています。前回指が離れた時間「 t 」と比較して、350ミリ秒以下ならダブルタップであろうというと予測して、イベントをキャンセルさせています。
この350ミリ秒というのがちょっと微妙で、ゆっくりダブルタップするとダブルタップ扱いになってしまうので、様子を見ながらこの値を大きくしてやってください。あまり大きくしすぎると、単なるタップも拒否されてしまうので注意。

入力欄にフォーカスが当たったときの拡大を禁止するには

さて、iPhoneなどのスマートフォンは、「ピンチアウト」や「ダブルタップ」以外にも勝手にページが拡大されてしまうことがあります。
それが入力欄にフォーカスが当たったとき。

このようにテキスト入力欄をタップして入力しようとすると、勝手にその部分が拡大されてしまいます。
これによって入力しにくくなる(どこに何を入力していいかがスクロールしないと分からなくなったり)ので、拡大させないようにするにはCSSを使います。

実はこの入力欄にフォーカスが当たると拡大されてしまう動作は、入力欄の文字の大きさを「16px」未満で発生してしまうようです。
なので、CSSに

input , textarea , select {
/* 入力欄にフォーカスが当たっても拡大しない */
font-size:17px;
}

のように記載しておくと、防ぐことができます。

まとめ

FlashサイトやPCサイトが減りつつある現在、ピッチイン・ピッチアウトを無効にしてしまうAppleの方針はどうかと思いますが、ゲームページや入力欄で拡大されては困る、という人は参考にしてください。

iPhoneのSafariでページを拡大縮小させない方法