スマホサイト・PCサイトを表示するための切り替えボタンをスマホで見たときだけ表示させる方法

前回は、レスポンシブデザインに対応したサイトで、PCサイト・スマホサイトを表示させるボタンを設置しました。

今回はそこから一歩進んで、スマホから見たときだけ切り替えボタンを表示させるように設定していきます。（クラス名など前回から引き継いでいます）

切り替えボタンを非表示にする

ひとまず、切り替えボタンを見えないように非表示にしちゃいます。

いつも使っているCSSに、以下を記述。

既存のCSS

ul.switch{
    display: none; /*非表示*/
}

ボタンの装飾CSSは、丸ごとごっそり別のCSSに移します。
今回は「switch.css」というスタイルシートに、下のCSSを記述します。
（3行目の「display: block;」をお忘れなく！）

switch.css

ul.switch{
    text-align: center;　/*ulの中身を中央揃え*/
    display: block; /*追加*/
    padding:0;
}

ul.switch li{
    display: inline-block; /*インラインブロック表示*/
    /display:inline; /*IE対策*/
    /zoom:1; /*IE対策*/
    padding: 0;
}

#btnPC{
    background: #ccc;
    color: #fff;
}

#btnSP{
    background: #726d6d;
    color: #fff;
}

ユーザーエージェントでスマホユーザーを判別する

いつも使っているCSSを読み込んだ後に、以下を記述します。

HTML

<!-- 通常のスタイルシートの読み込み -->
<link rel="stylesheet" href="既存のCSS.css" type="text/css">

<!-- ユーザーエージェントでデバイスを振り分け -->
<script type="text/javascript">
if (((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) {
        document.write('<link rel="stylesheet" href="switch.css" type="text/css">');
}
</script>

userAgentを使って、閲覧しているデバイス機器を判別します。
上記は、iPhone・iPod・Androidで閲覧している場合、「switch.css」を読み込みます。

通常のスタイルシートで「ul.switch」を非表示にしていましたが、その次に読み込まれる「switch.css」に「display: block;」を記述することで、「display: none;」を上書きして表示させています。

これでiPhone・iPod・Androidで見たときは、「switch.css」が適用され切り替えボタンが見えるように。
それ以外で見たときは「switch.css」が読み込まれないため、切り替えボタンは「display:none;」のまま非表示となります。

• pocket