タイトル: 画面サイズもしくはスマホの場合のCSS切り替え方法
SEOタイトル: 画面サイズもしくはスマホの場合のCSS切り替え方法
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<h2>サイズでの切り替え</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><link href="/css/small.css" rel="stylesheet" </span><span style="color:#f1c40f">media="only screen and (min-width: 0px) and (max-width: 768px)"</span><span style="color:#ffffff">></span></p>
</td>
</tr>
</tbody>
</table>
<p>上記の例では0 ～ 768pxの場合は「<span style="color:null"><strong>small.css</strong></span>」を適用させる記述となります。</p>
<p><span style="color:#e74c3c">スマホやタブレットといった小さい画面になった場合にも切り替えられます</span>。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff">@media screen and (min-width:961px) {<br />
/*pc*/<br />
}<br />
<br />
@media only screen and (min-width:376px) and (max-width:960px) {<br />
/*tablet*/<br />
}<br />
<br />
@media screen and (max-width:375px) {<br />
/*スマホ*/<br />
}</span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>デバイスによる切り替え</h2>
<p>以下、PHPによるデバイスで条件分岐させる方法。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><?php</span><br />
<span style="color:#f1c40f">$ua = $_SERVER['HTTP_USER_AGENT'];<br />
$browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));</span><br />
<span style="color:#ffffff"> ?></span></p>
<p><span style="color:#ffffff"><?php </span><span style="color:#f1c40f">if($browser=='sp')</span><span style="color:#ffffff"> { ?><br />
<link href="/css/small.css" rel="stylesheet"><br />
<?php </span><span style="color:#f1c40f">}</span><span style="color:#ffffff"> ?></span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>