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がメインのコーポレートサイト等はやはり印象は大事にしたいものです。