IEにのみ表示させる方法

IE11が遂に終了

2022年6月16日にIE11のサポート終了が宣言されたのが今年の春位でしょうか?

私は今後新規で案件を受ける場合は殆どの場合IE11の対応はしない事にしています。

またWordPressも現在の最新版の5.8でIEのサポートを終了しています。

ですので、基本的にはIE11で閲覧した場合、表示崩れが起きても気にしないスタンスです。

ただし表示崩れが起きたままのサイトを閲覧されて

「微妙なサイトだな〜」

なんて思われるのもなんか嫌なので、私の場合はIE11にのみ注意喚起のような文章を掲載する事にしています。

IE11のみPHPで切り分ける

基本的には下のコードをfunctioin.phpに記述してもらえればOKです

▼phpではユーザーエージェントが取得出来るので、小文字で取得。その後strposで文字列検索で判別します。

function is_ie()
{
    $ua = mb_strtolower($_SERVER['HTTP_USER_AGENT']);  //ユーザーエージェントを取得
    if (strpos($ua, 'msie') !== false || strpos($ua, 'trident') !== false) {
        return true;
    }
    return false;
}

▼上記作ったファンクションをIEのみ表示させたい箇所に条件分岐していれてあげましょう。

<?php if (is_ie()) : ?>
    <?php include('temp/ie.php')?>
    <?php endif; ?>

▼IEに表示されるファイルを作成します。別にファイルじゃなくても全然OKです。
ここまで書いてしまうと、ちょっと怖い印象を持たれてしまうかもしれないですね。
下記ではクロームとファイアーフォックスのダウンロードを促しています。

<style>
.ieReminder {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9999;
    overflow: hidden;
    background: #444444;
    padding: 15px;
}

.ieReminder_inner {
    display: block;
    margin: 0px auto;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    margin-top: 30px;
    color: #fff;
    z-index: 9999;
}

.ieReminder p {
    padding: 5px 15px;
    text-align: center;
    background: #00a1ff;
    max-width: 400px;
}

.ieReminder a {
    text-decoration: underline;
    color: #ffffff;
    font-weight: bold;
}
</style>
<div class="ieReminder">
    <div class="ieReminder_inner">このブラウザでは動作保証対象外となります。
        <br>引き続きWEBサイトを閲覧する場合は、サポートされているブラウザに切り替えてください。
        <br>2021年以降、Windows10で閲覧・動作推奨するブラウザは下記になります。
        <br>
        <br>
        <p clas="ieReminder_btn edde">
                <a href="https://www.microsoft.com/ja-jp/edge">Microsoft Edge</a>
            </p>
        <p clas="ieReminder_btn chrome">
                <a href="https://www.google.com/chrome/">Google Chrome</a>
            </p>
        <br>
        <br>ダウンロードとインストール方法などにつきましては、ブラウザ提供元へお問い合せください。
    </div>
</div>

以上の作業でIE11にのみ表示する事が可能です。
記述量もさほど多くなく、そこまで難しくありませんね。

IE11以外にも対応出来る

この方法で使用している$_SERVER['HTTP_USER_AGENT']は結構強力で、実はIEだけでなく様々なシーンで応用する事が出来ます。

スマホ・タブレット・PCで表示を変えたい場合は以下の様に記述する事が出来ます。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
  //スマホ時の記述

 } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) { 
  //タブレットの記述

php } else { 
  //PCの記述

php } 

他にもiPhoneとAndroidを区別する事も可能です。
ただしipadだけはユーザーエージェントをそのままでは取得する事が出来ません。
※厳密に言うとipadでのsafariブラウザ


わざわざIE11で閲覧しないでください。なんて注意喚起は出さなくても良い気がしますが、BtoBがメインのコーポレートサイト等はやはり印象は大事にしたいものです。

タイトルとURLをコピーしました