この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:1
ページ更新者:T
更新日時:2019-06-20 21:16:59

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

サイズでの切り替え

<link href="/css/small.css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 768px)">

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

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

 

デバイスによる切り替え

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

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

<?php if($browser=='sp') { ?>
<link href="/css/small.css" rel="stylesheet">
<?php } ?>