レスポンシブデザインでPC用スマホ用切り替えボタンをスマホにだけ表示させる方法

スマートフォンでのネット利用率が益々上昇しているようです。
PCは電源入れて起動するまでの待ち時間は長いし、ブラウザとか言われてもどれがどれか分からないし……という声も聞きます。
その点スマートフォンは手軽に閲覧できるし、面倒なメンテナンスも必要ないし、ユーザーとインターネットとの距離がぐっと近付きます。
個人的には、スマートフォンだと電池減るの早いし、ページ読み込み速度は遅いし、そもそも自宅からだと電波届きにくくて繋がらないし、PCを優先してしまうのですが。
4G？何それ。うちに来るのあと何年後かなー。

今やwebサイトはPCでもスマートフォンでも無理なく見られるのが絶対条件になりつつありますが、制作側にしてみれば、結構手間がかかります。
ページを2つ作ってhtaccessで切り替えるとか、デバイスのサイズに合わせたレスポンシブデザインにするとか。
どちらにもメリット・デメリットはあります。

レスポンシブデザインを採用した場合、ネックとなるのが「PC用」「スマートフォン用」の表示切り替えボタン。
どのサイトでも見かけますよね。
スマートフォンで閲覧していても、やはり情報量が減ったりするので、PC用表示させたい人も多いでしょう。
そういう時に、参考にしたのがこちら。

レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた（A40様）

作業が楽で、解説も分かりやすく、私でもすぐに設置できました。
一番難しかったのが、jquery.cookie.jsをダウンロードする時にちょっと迷子になりかけた、というところでしょうか？
調べていく中で、この方法を採用している人はやはり多かったです。
多くのコーダーにとって救いの手ではあるのですが、1つだけ難点がありました。

PCからの閲覧だと、表示切り替えしません。

PCから閲覧する場合は、そもそも必要ない機能ではあります。
しかし、切り替え機能は働かないのに、ボタンだけ表示されるのも格好が付きません。
そう思って、スマートフォン用のデバイスサイズだけボタンを表示させる設定にしてみました。

するとここでも問題発生。

スマートフォンでPC用表示にした後、ボタンが消えてしまうのでスマートフォン用表示に戻れなくなりました。

「手を加えてスマートフォンで見た時だけ表示させるようにしました」と追記みたいに書いてらっしゃる方もいましたが、私はその加えるべき手に対する知識がありません。
調べに調べて、いつものように他力本願で辿り着いた道が、こちらです。

[code]
<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) {
document.write(‘<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /><link rel="stylesheet" type="text/css" href="css/smartphone.css">’);
}else {
document.write(‘<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />’);
}
</script>
[/code]

style.cssは、PC版とスマートフォン版の共通cssです。

この記述ですが、必ずヘッダーにしましょう。
ヘッダーの行数を増やすことをためらい、既存のjsファイルに書き加えてみたら、見事にページが真っ白になりました。

こうしてみると、少なくともcssは、PC用とスマートフォン用、別々に用意した方が良いのかもしれません。
cssファイル数が増えるか、cssファイルの行数が増えるか、どちらがSEO対策として不利なのでしょう。
その辺りは別途考察してみますが、制作・管理側としては、ファイル数が増えた方がまだ作業しやすそうです。

【ハートブレーン】https://blog.heart-kokoro.net