スマホ・タブレットにて横向きにしてサイトを見られたくない場合の処理

// 初期化等
document.addEventListener('DOMContentLoaded', function() {
    modal_set();
    modal_check();
});

// 横サイズが変更された際の処理
window.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('resize', function() {
        modal_check();
    });
});

//----------------------------------------------------------
// 　スマホ・タブレットが回転した時の処理
//----------------------------------------------------------
window.onorientationchange = function () {
  modal_check();
}

//----------------------------------------------------------
// 　スクロール禁止・許可処理
//----------------------------------------------------------
function disableScroll(event) {
  event.preventDefault();
}

//----------------------------------------------------------
// 　モーダルセット処理
//----------------------------------------------------------
function modal_set() {
  let head_element = document.head;
  head_element.insertAdjacentHTML('afterend','<div id="modal"><div class="overlay"></div><div class="modal-wrapper">本サイトは横向きに見ることを推奨しておりません。<br />縦向きにてご覧ください。</div></div>');
}

//----------------------------------------------------------
// 　スマホ・タブレット回転チェック
//----------------------------------------------------------
function modal_check() {
  switch ( window.orientation ) {
    case 0:
    case 180:
    case -180:
      modal_off();
    break;
    
    case 90:
    case -90:
    case 270:
    case -270:
      modal_on();
    break;
  }
}

//----------------------------------------------------------
// 　モーダル表示処理
//----------------------------------------------------------
function modal_on() {
  let element = document.getElementById("modal")
  if( element !== null ) element.style.display = "block";

  document.addEventListener('touchmove', disableScroll, { passive: false });
  document.addEventListener('mousewheel', disableScroll, { passive: false });
}

//----------------------------------------------------------
// 　モーダル非表示処理
//----------------------------------------------------------
function modal_off() {
  let element = document.getElementById("modal")
  if( element !== null ) element.style.display = "none";

  document.removeEventListener('touchmove', disableScroll, { passive: false });
  document.removeEventListener('mousewheel', disableScroll, { passive: false });
}

#modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
}
#modal .overlay{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #000000;
  opacity: 0.7;
  top: 0;
  left: 0;
}
.modal-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 70%;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    padding: 20px;
}