Internet Explorerを判定してアラートを表示し、モダンブラウザへ誘導する方法（PHP版 / JS版）

function is_IE() {
    $ua = mb_strtolower( $_SERVER['HTTP_USER_AGENT'] );  //すべて小文字にしてユーザーエージェントを取得
    if ( strpos( $ua,'msie' ) !== false || strpos( $ua, 'trident' ) !== false ) {
        return true;
    }
    return false;
}

<?php if ( is_IE() ) : ?>
<div class="ie_alert">
  <span>Internet Explorer、ダメ絶対！</span>
  <p>あなたが使用している <b>Internet Explorer</b> というブラウザはとても古いものです。<br>
    言ってしまえば、百害あって一利なしの老害です。<br>
    世界中で、多くのWEB制作者があなたの <b>Internet Explorer</b> のせいで苦悩しています。<br><br>
    どうか、<b>最新のモダンブラウザ（EdgeやFirefox、Google Chrome）</b>をお使いください。
  </p>
  <a href="https://www.google.co.jp/chrome/index.html">Google Chromeをダウンロード</a>
<div>
<?php endif; ?>

<script>
  /* IE判定関数を定義しておく */
  function isIE() {
    var userAgent = window.navigator.userAgent.toLowerCase();
    if ( userAgent.indexOf( 'msie' ) !== -1 || userAgent.indexOf( 'trident' ) !== -1 ) {
        return true;
    }
    return false;
  }

  /* DOM構造読み込み完了後にアラート表示のHTMLを挿入 */
  document.addEventListener("DOMContentLoaded", function () {
    if ( isIE() ) {
      var footer = document.getElementById('footer');  //アラート表示を挿入する場所
      var ieDiv = document.createElement('div');      //div要素の生成
      ieDiv.classList.add('ie_alert');                //クラス名付与

      var ieAlert = '<span>Internet Explorer、ダメ絶対！</span>';
      ieAlert += '<p>あなたが使用している <b>Internet Explorer</b> というブラウザはとても古いものです。<br>';
      ieAlert += '言ってしまえば、百害あって一利なしの老害です。<br>';
      ieAlert += '世界中で、多くのWEB制作者があなたの <b>Internet Explorer</b> のせいで苦悩しています。<br><br>';
      ieAlert += 'どうか、<b>最新のモダンブラウザ（EdgeやFirefox、Google Chrome）</b>をお使いください。</p>';
      ieAlert += '<a href="https://www.google.co.jp/chrome/index.html">Google Chromeをダウンロード</a>';
      ieDiv.innerHTML = ieAlert;
      footer.appendChild( ieDiv );    //HTMLの追加
    }
  });
</script>

.ie_alert{
    position: fixed;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    background: rgb(196, 52, 52); /* rgba未対応の古いIE用 */
    background: rgba(196, 52, 52, 0.95);
    text-align: center;
    padding: 10% 0;
    z-index: 1000;
    span,p,a{
        color: #fff;
    }
    span{
        display: block;
        font-size: 80px;
    }
    p{
        font-size: 20px;
    }
    a{
        display: inline-block;
        font-size: 16px;
        margin-top: 20px;
        padding: 8px 80px;
        border: solid 1px #fff;
        &:hover{
            background: rgba(255,255,255,0.1);
        }
    }
}