こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

-広告-

解決済みの質問

php?でスマホ用のCSSへ切り替える記述について

php?でスマートフォン用のCSSへ切り替える記述について質問です。
HTML/CSSの知識はあるのですがPHPについてはさっぱりで…
お力を頂ければと思います。

今度CSSの切り替えでスマートフォン用のサイトを表示することになったのですが、
一部システムが絡んでいるため切り替え方が分かりません。
拡張子は.ctpです。

HTML/CSSで下記の記述にしています。
<link rel="stylesheet" type="text/css" href="../_common/css/import.css" media="all and (min-width : 706px),print" />
<link rel="stylesheet" type="text/css" href="../_common/css/_phone/import.css" media="only screen and (max-width : 705px)" />


PHP?でCSSを読み込む部分は
<?php
echo $this->Html->meta('icon');
echo $this->Html->css('/_common/css/import.css');
echo $scripts_for_layout;
?>
と記述されています。

上記にどういった記述を加えればHTML/CSSのような切り替えが可能でしょうか?
もしくは、全く別の部分をいじらなければならないのでしょうか?
よろしくお願い致します。

投稿日時 - 2016-01-09 10:21:19

QNo.9108456

困ってます

質問者が選んだベストアンサー

> 重ねて質問で申し訳ないのですが、if ([スマホ]) {の部分はiPhoneとAndroidなど複数認識させたい場合はどういった記述になりますか?

簡単に判定するならこんな感じ
if (preg_match("/android/i", $_SERVER['HTTP_USER_AGENT']) || preg_match("/iphone/i", $_SERVER['HTTP_USER_AGENT'])) {
・・・
}

但し、欠点はAndroid OSを使っている機器はスマホなのかタブレットなのかPCなのか判別出来ないと言う事と、各端末の標準ブラウザなら問題無いけど別途インストールしたブラウザアプリからアクセスがあった場合は、ユーザーエージェントにOS名が入っていない場合があるので判別出来ません。

本来の目的は画面の小さな端末で見やすいスタイルを適用させたいのでしょうから、ブラウザ側で表示領域の大きさで判別してスタイルシートを分けるのが理想的なので、レスポンシブデザインのCSS切り分け方法を使う方がいいと思いますよ。

投稿日時 - 2016-01-09 17:00:14

お礼

詳しく説明して頂きありがとうございました。
とても勉強になりました。
問題点についても折り合いをつけつつ、やってみたいと思います。

投稿日時 - 2016-01-10 08:43:18

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(2)

ANo.1

<?php
echo $this->Html->meta('icon');
if ([スマホ]) {
echo $this->Html->css('/_common/css/スマホ用css');
} else {
echo $this->Html->css('/_common/css/import.css');
}
echo $scripts_for_layout;
?>
って事になるでしょうね。
何をもってスマホと判定するかは仕様を決めなければいけません。
ユーザー江ジェントに Android という文字列があればスマホとするのか、もっと他の条件を加味するのかと言う事を検討する必要があるでしょう。
正直な所、サーバサイドで完璧な判定は不可能ですので、ある程度妥協するかブラウザ側で判定する事にするか決める必要があります。

投稿日時 - 2016-01-09 10:40:10

補足

回答ありがとうございます。時間もなく困っていたので大変有り難いです。
重ねて質問で申し訳ないのですが、if ([スマホ]) {の部分はiPhoneとAndroidなど複数認識させたい場合はどういった記述になりますか?
よろしくお願い致します。

投稿日時 - 2016-01-09 10:51:35

-広告-
-広告-
-広告-
-広告-