php wp_is_mobile() でCSS読み込み

Question

ワードプレスでの
CSSの読み込みの記述について

PCとスマホで別のCSSを読み込ませたいです。
記述のしかたで質問がありまして、

<link rel="stylesheet" media="screen and (min-width: 768px)" href="pc.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="sp.css">

上記のようなブラウザサイズでの指定ではなく、

<?php if( wp_is_mobile()) : ?>
<link rel="stylesheet href="sp.css">
<?php else : ?>
<link rel="stylesheet" href="pc.css">
<?php endif; ?>

このような記述でも問題ないのでしょうか？

動き的には問題なさそうなのですが、
そういった記述を行なっている人が少ないのが気になりまして、
何か問題がでてくるのかな？と心配になり質問させていただきました。

よろしくお願い致します。

Answer 1

これら2つは微妙に動作が異なります。
ブラウザサイズでの指定では、ブラウザ領域の横幅の長さによって適用されるスタイルシートが変わります。
wp_is_mobile()を使ったやりかたではUser-Agentなどでサーバ側でモバイルユーザなのかを判定して、その結果によって使用されるスタイルシートが変わります。

これら2つの違いが現れる例として、PCブラウザでウィンドウの横幅が狭い場合などがあります。
最初のやり方だとsp.css、2つめのやり方だとpc.cssが適用されます。

Comments

[annai]

よくわかりました！ありがとうございます。