webサイトなどで、スマホ・タブレット・PCそれぞれ表示を切り替えたい場合は条件分岐を使う方法がおすすめです。
画像の表示・非表示を切り替えるだけではなく、htmlやJSなどの構造ごと切り替えることができるので、表現の幅が広がりますよ！
ASK
今回紹介する条件分岐はphpファイルに記載するためのコードだよ。
普通の固定ページや投稿ページに記載しても意味がないので注意してね！
普通の固定ページや投稿ページに記載しても意味がないので注意してね！
スマホ・タブレット・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)) {
?>
//スマホで表示させたい内容を記載
<?php } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) { ?>
//タブレットで表示させたい内容を記載
<?php } else { ?>
//PCで表示させたい内容を記載
<?php } ?>スマホとそれ以外で表示を切り替える条件分岐
<?php
$ua=$_SERVER['HTTP_USER_AGENT'];
$browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
if ($browser == true){
$browser = 'sp';
}
if($browser == 'sp'){
?>
//スマホで表示させたい内容を記載
<?php }else{ ?>
//タブレット・PCで表示させたい内容を記載
<?php } ?>CSSで表示を切り分けちゃダメなの？
最近はレスポンシブデザインが主流ではありますが、時にはPC・スマホで別々の画像を表示させたい場面が出てきます。
詳しくはこちらで解説しています↓
PCとスマホでバナーを切り替えたほうが良い3つの理由！アダプティブデザインの効果を徹底解説！
hazideza.com
2020.08.27
そんな時にCSSのdisplay:noneを駆使して表示を切り替えてもいいのですが、これには1つ問題があります。
ページを表示する際、表示されていない画像のコードも毎回読み込まれるので、ページの表示速度に影響が出てしまいます。
そこまで大した差ではありませんが、こういった小さな積み重ねで結果的にサイトが重くなってしまうのです。
なるべく無駄なコードを無くすためにもなるべく条件分岐を使うようにしましょう！
まとめ
今回紹介したコードをphpファイルにコピペするだけで条件分岐を使うことができます。
Webサイトを作成するうえで必ず使うコードですので、お気に入りに登録しておくことをおすすめします。
最初は難しく思えるかもしれませんが、やってみると簡単ですのでぜひ試してみてください！
コメント