携帯端末・PCでCSSを切り替える
- 携帯端末（スマホ・タブレット）とPCで読み込むCSSを切り替えたい。
- スマホの表示を軽くするために読み込むソースコードをコントロールしたい。
ココがポイント
結論：
JavaScriptのnavigator関数を利用してブラウザのユーザーエージェントを返してもらい、携帯端末（スマホ・タブレット）とPCを判別する。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、Webページを作成していると、読み込むCSSの情報量が多くなり、携帯端末からのアクセスが重たくなっていると感じたことはございませんか？
この問題の解決策の1つに、携帯端末とPCとでCSSファイルを分けて、読み込む情報量を減らすという方法があります。
そこで、今回は、携帯端末とPCで読み込むCSSを切り替えることのできる方法をご紹介しようと思います。
目次
1.外部CSSファイルを読み込む
外部CSSファイルを読み込むことで、余計なコード情報を省き、Webページを開く早さを上げることが可能です。
ご紹介するのは、WordPressのテーマ「AFFINGER5」を利用した、読み込みになります。
もっと詳しく
2.JavaScriptで携帯端末とPCを判別する
2.Step1_WordPressでjQueryを簡単に追加できるプラグイン
プラグイン「Simple Custom CSS and JS」を使用するとjQueryを簡単に実装できます。
もっと詳しく
2.Step2_JavaScriptのコードを追加
<link rel="stylesheet" id="userAgent_match" type="text/css" media="all"/>
Headerに以上のHTMLを追加。linkタブの方をJavaScriptよりも前に記述します。
<script type="text/javascript">
jQuery(document).ready(function($){
/*スマホ・タブレット_PC条件分岐*/
var href ="";/*空の変数を作成*/
if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)){
/*スマホ・タブレット（iOS・Android）の場合の処理を記述*/
href = "https://MobileTablet.css";/*携帯端末で使用するCSSのURL*/
}else{
/*PCの場合の処理を記述*/
href = "https://PC.css";/*PCで使用するCSSのURL*/
}
/*css読み込み*/
$('#userAgent_match').attr('href', href);
});
</script>
以上のJavaScriptを追加。携帯端末とPCとでhrefに代入するURLを切り替えています。
今回は「スマホ・タブレット」と「PC」とで条件分岐をしておりますが、「スマホ」と「タブレット・PC」とで条件分岐もできます。
もっと詳しく
3.PHPで携帯端末とPCを判別する
詳しい記事を下記にリンクしております。コードを抜粋しておりますので、PHPでの判別をご利用の方は参考にしてください。
もっと詳しく
3.Type1_PHPでの定義する方法
function ua_smt (){
//ユーザーエージェントを取得
$ua = $_SERVER['HTTP_USER_AGENT'];
//スマホと判定する文字リスト
$ua_list = array('iPhone','iPad','iPod','Android');
foreach ($ua_list as $ua_smt) {
//ユーザーエージェントに文字リストの単語を含む場合はTRUE、それ以外はFALSE
if (strpos($ua, $ua_smt) !== false) {
return true;
}
} return false;
}
PHPで以上を定義。
if (ua_smt() == true) {
//スマホの場合の処理
} else {
//それ以外の場合の処理
}
PHPでの使い方。
<?php if (ua_smt() == true): ?> <!-- スマホの場合 --> <p>スマホで閲覧中です。</p> <?php else: ?> <!-- それ以外の場合 --> <p>PCで閲覧中です。</p> <?php endif; ?>
HTMLでの使い方。
3.Type2_WordPressにある関数wp_is_mobile()を使用する方法
function.phpに以下を追加。
//PCでのみ表示するコンテンツ
function if_is_pc($atts, $content = null ){
$content = do_shortcode( $content);
if(!wp_is_mobile()){
return $content;
}
}
add_shortcode('pc', 'if_is_pc');
//スマートフォンで表示するコンテンツ
/*タブレットも含まれる*/
function if_is_sp($atts, $content = null ){
$content = do_shortcode( $content);
if(wp_is_mobile()){
return $content;
}
}
add_shortcode('sp', 'if_is_sp');
ショートコードで使用：
- PCでのみ表示
- [sp]スマホ・タブレットでのみ表示[/sp]
もっと詳しく
まとめ
お疲れ様です。
携帯端末とPCを判別してくれる方法に、PHPを使用する方法があります。こちらの方法がうまく実装ができない方は、JavaScriptの方法を試してみて下さい。
ご一読いただき、ありがとうございました。
