この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:guest
更新日時:2026-05-15 05:24:41

タイトル: 画面サイズもしくはスマホの場合のCSS切り替え方法
SEOタイトル: 画面サイズもしくはスマホの場合のCSS切り替え方法

サイズでの切り替え

media="only screen and (min-width: 0px) and (max-width: 768px)">

上記の例では0 ～ 768pxの場合は「small.css」を適用させる記述となります。

スマホやタブレットといった小さい画面になった場合にも切り替えられます。

@media screen and (min-width:961px) {
/*pc*/
}
  
@media only screen and (min-width:376px) and (max-width:960px) {
/*tablet*/
}
 
@media screen and (max-width:375px) {
/*スマホ*/
}

 

デバイスによる切り替え

以下、PHPによるデバイスで条件分岐させる方法。


$ua = $_SERVER['HTTP_USER_AGENT'];
$browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
 ?>

if($browser=='sp') { ?>

} ?>