【備忘録】スマホの向きの制御とピンチイン・ピンチアウト禁止方法

2021年1月27日2024年2月18日

【備忘録】スマホの向きの制御とピンチイン・ピンチアウト禁止方法

こんにちは！

今回からメモを『備忘録』という風にしていきます。
理由は~~こっちの方がかっこいい~~ではなくてわからないことで検索したときに
備忘録を使っている方が多いからです。

今回のメモはスマホの向きの制御とピンチイン・ピンチアウトです。
解説の前にピンチイン・ピンチアウトって何？って感じですよね。
私もここまでたどり着くのに苦戦しました。
『スマホ　拡大禁止』とかで調べていました。

ピンチインとは、iPod touchやiPhone、iPadなどにおけるマルチタッチスクリーン操作の呼び名のうち、2本の指で画面上の操作対象をつまむように動かし、画面を縮小させる操作のことである。 ピンチインに対して、2本の指を広げるように動かすことで画面を拡大させる操作を、ピンチアウトと呼ぶ。

webioより参照ピンチインとは何？ Weblio辞書

実装しようとした理由

スマホの向きの制御では、こちらのギャラリーサイトで
スマホ表示の時にレイアウトが小さくなってしますからです。

レスポンシブ対応しろよと思うかもしれませんが、
縦表示にするしか方法が思い当たらず、だったら
スマホを横画面で見てもらった方がよくねとなったからです。

ピンチイン・ピンチアウトでは、拡大するとページがクラッシュするという不具合が
あったので拡大を禁止してクラッシュしないように対策をしたためです。

結局、別の方法でギャラリーサイトを表示させているので使わなかったのですが
何かの時に使えるかもです。

しかし、拡大しすぎるとクラッシュする問題は解決できていません。
上記で紹介したページで拡大しまくると、再読み込みされ2回目でクラッシュします。
原因はpositionの多様とプラグインの『swiper』で何らかの不具合を起こしているかと考えております。

話がそれてしまうので、ここらへんで
解説に移ります。

スマホの向きの制御

スマホの向きの制御は【jQueryメモ】横向き縦向き判定のサイトを参考にしました。

const side = document.getElementById('side');
$(function () {
  var orientation = window.orientation;
    if(orientation == 0){
      side.style.display = 'flex';
    }else{
      side.style.display = 'none';
    }
  });

  $(window).on('orientationchange',function(){
    var orientation = window.orientation;
      if(orientation == 0){
        side.style.display = 'flex';
      }else{
        side.style.display = 'none';
      }
  });

jQueryを読み込ませてJSに書き込めば簡単にできます。

処理内容としては
ページが読み込んだときと、読み込んだ後のスマホの向きを判断し

if(orientation == 0)
スマホの向きが0度（縦向き）
とそれ以外の向きで処理をしています。

縦だった場合、sideにflex
横だった場合、sideにnoneにスタイルを変えています。

縦向きで横向きにしてくださいという画面が出ます。
検証ツールでこちらを試してみたください。

0とありますが90、－90でそれぞれ
横画面とそれ以外の処理もできます。

ピンチイン・ピンチアウト

ピンチイン・ピンチアウトで参考にしたサイトは
スマホのピンチアウトを禁止するHTMLコードで

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

を入れたのですが、何も変わりませんでした。

そのあと参考にしたサイト
iPhoneのSafariでページを拡大縮小させない方法
に載っていた

// ピンチイン・ピンチアウト禁止
  document.documentElement.addEventListener('touchstart', function (e) {
    if (e.touches.length >= 2) {e.preventDefault();}
  }, {passive: false});

をJSに書き込んだらできました。

処理としは
2本指を使って操作するイベントをキャンセルさせています。