今回は、表示しているブラウザがInternet Explorerかどうかを判断して、IEでWEBサイトを表示した場合に「このサイトはInternet Explorerに対応していません」とのことを伝える文言を表示する方法を紹介します。
今回の方法はphpを利用した方法です。phpの扱いに慣れていない方もいるかと思うますが、今回の場合は丸っとコピペで対応可能なので初心者の方でも実装出来ます。
クライアントにIEの表示がおかしいと言われた場合の一つの手段として使って下さい。
【コピペOK】IE対応してません！と伝えるバナーのphpコード
まずは以下のphpコードをhtml文書の最上部に記述します。
このコードではWEBサイトを表示しているブラウザがIEであるか、ないのかを判別します。
<!---------------- 最も上に記述 ---------------->
<?php
function is_IE() {
$ua = mb_strtolower( $_SERVER['HTTP_USER_AGENT'] ); //すべて小文字にしてユーザーエージェントを取得
if ( strpos( $ua,'msie' ) !== false || strpos( $ua, 'trident' ) !== false ) {
return true;
}
return false;
}
?>
<!---------------- 最も上に記述ここまで---------------->次に以下の記述をbodyタグの最上部に記述して下さい。
先のphpコードでIEであると判別された場合に以下の記述が有効になります。
<!------------------ bodyに記述 ------------------>
<?php if ( is_IE() ) : ?>
<!-- IEの場合のみ表示 -->
<div id="header-bar">
<div id="header-inner">このブラウザでは動作保証対象外となります。
<br>引き続きWEBサイトを閲覧する場合は、サポートされているブラウザに切り替えてください。
<br>2021年以降、Windows10で閲覧・動作推奨するブラウザは下記になります。
<br>
<br>
<span clas="edde" style="background: White;padding: 5px 15px;">
<a href ="https://www.microsoft.com/ja-jp/edge" style="text-decoration: underline; color:#999;">Microsoft Edge</a>
</span>
<span clas="chrome" style="background: White;padding: 5px 15px;">
<a href="https://www.google.com/chrome/" style="text-decoration: underline; color:#999;">Google Chrome</a>
</span>
<br>
<br>ダウンロードとインストール方法などにつきましては、ブラウザ提供元へお問い合せください。
</div>
</div>
<style>
#header-bar {
position:fixed;
top:0px;
left:0px;
height:240px;
width:100%;
z-index:9999;
overflow:hidden;
background: rgba(153, 153, 153, 0.85);
}
#header-inner{
width: 1080px;
display:block;
margin:0px auto;
text-align: left;
font-size: 18px;
font-weight: 400;
height:200px;
margin-top: 30px;
color: #fff;
z-index:9999;
}
</style>
<?php endif; ?>
<!----------------- bodyに記述ここまで ---------------->スタイルに関しては、直書きしていますが、スタイルごとIE判別でON/OFFされるのでこのままで何の問題はないかと思います。
これだけで実装完了です。実際にIEでWEBサイトを表示すると以下のように注意文言が出てきます。
以上が「【コピペOK】ブラウザ判別して「IE対応してません！」と伝えるphpコード」でした。
2021年内にIEは完全に非対応となるので早めの対応をおすすめします。
