スマホとPCで
表示・非表示を切り替える要素の作り方
ここでは、「スマートフォンから見た時だけ表示」して、「PCで見た時は表示しない」要素を作りたい時に試した3つの方法をまとめています。
それぞれ、CSS、java script、PHPでの実装の方法をまとめてみました。
CSSでの実装は画面幅での判定になるので、OS単位で完全に分けるには、java scriptやPHPでの実装が現実的です。
私はCSSであれこれ3時間も費やしてしまったので、一読するとちょっとだけ時短できるかも知れません。
CSSでスマホで見た時だけ表示するには
CSSでページを閲覧している端末がスマートフォンかPCかを識別するのは難しいので、レスポンシブルデザインのときに使う「メディアクエリ」で、それに近い方法を試してみました。
この設定では、表示画面サイズによって、表示・非表示を切り替えることができます。
<div id="sample">
<p>サンプルテキスト</p>
</div>
@media (min-width: 800px){
.sample{ display: none; }
}
メディアクエリの指定は、
「min-width」なら「画面幅がこれ以上のとき適用」、
「max-width」なら「画面幅がこれ未満のとき適用」といった指定になります。
ここでは画面幅が800px以上だったら非表示、という記述になっています。
注意点としては、PCでもウィンドウを小さくして見ている場合は、当然要素は表示されること。
ここにハマって気づくまでに3時間を浪費しました汗。
レスポンシブルデザインでは理想的な動作ですが、「スマートフォンで見た時だけ表示させる」要素の実装方法としては不十分と言えます。
java scriptで
スマホで見た時だけ表示するには
java scriptではOSを判定する方法があるので、iPhone、AndroidといったOSを把握して、より確実にスマートフォンとPCでの表示を分ける事ができます。
java scriptはjsファイルに分ける事もできますが、ここではテストしやすいようにHTMLファイルに直接記述する書き方をしています。
<div id="sample">
<p>サンプルテキスト</p>
</div>
<!--以下java script-->
<script>
var Element = document.querySelector('#sample');
if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
// スマートフォンやタブレットでは表示
Element.style.display="block";
}else{
// それ以外なら非表示
Element.style.display="none";
}
</script>
ここでは「表示・非表示」を切り替えたい要素の親要素である「div」にIDをつけて、スマートフォン以外の端末から見た場合は非表示になるように分岐指定しています。
java scriptから「表示・非表示」を切り替えるには色々方法がありますが、今回はシンプルに「display: none」を追加する方法で実装してみました。
PHPで
スマホで見た時だけ表示するには
PHPでもOSを判定する方法があるので、スマートフォンで見た時だけ表示する指定も実装できます。
端末のOSによって表示する要素や広告を変える、といった事もカンタンに実装できます。
<?php
$os = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($os, 'Android') !== false) && (strpos($os, 'Mobile') !== false) || (strpos($os, 'iPhone') !== false) || (strpos($os, 'Windows Phone') !== false)) {
?>
<div>
<p>スマートフォンやタブレットで表示させる要素</p>
</div>
<?php } else { ?>
<div>
<p>それ以外で表示させる要素</p>
</div>
<?php } ?>
青い部分がPHPの記述です。
通常PHPは拡張子が「.php」の「PHPファイル」でしか使えませんが、拡張子が「.html」の「HTMLファイル」で作ったページでも、「.haccess」ファイルの設定次第でPHPを動かす事ができます。
「HTMLファイル」ではjava scriptで実装するのがシンプルだと思いますが、何らかの都合でPHPで実装したい場合は、試してみるのもいいかも知れません。
スマホとPCでの表示切り替え余談
ここまで、「スマートフォンで見た時だけ要素を表示したい！」といった時に試した、3つの方法を見てきました。
java scriptでもPHPでもページの読み込み速度が落ちるのでは……、と心配でしたが、1ヶ所の軽い処理だったので体感的な速度は変わりませんでした。
ただし、OSを識別するだけだと「Androidタブレットで見た場合にも非表示にしたい」といった場合などには対処できません。
今回はAndroid端末やiPhone、iPadのみで表示したい要素だったので、タブレットで表示されてもOKでしたが……
より正確に「スマートフォンだけ」で表示したい場合には、OS判定と合わせて画面幅も一緒に指定しておくなどの工夫も必要になりそうです。
