スマホとPCの表示をクリックで切り替える方法

質問

初心者でスマホ対応に困っております。

同一ページ（ワンソース）で対応できるようにしようと
javascriptのuserAgent（※以下参照）でPC用とスマホ用の
表示CSSが切り替わるページを作成しています。

スマホサイトのフッターによくある「PC」へのリンクをクリックすると
スマートフォンでもPC用のスタイルが適用されるようにしたいと思っております。
また、PC用CSSからスマホ用CSSへ戻るリンクも設置したいと思っております。

環境は「.htaccess」と「php」が利用できないサーバです。
できればウィンドウサイズで表示が切り替わるのではなく、
リンクをクリックするだけで
PC用とスマホ用のCSSを切り替えたいと思っております。
色々と探してみたのですが、なかなか思うソースが見つからなかったので、
実現可能かどうかも踏まえてご教授いただけますと幸いです。

以下、こんな感じでCSSを切り替えております。

if (navigator.userAgent.indexOf('iPhone') != -1) {
document.write('<meta name="viewport" content="width=device-width, maximum-scale=1.0" />');
document.write('<link rel="stylesheet" href="css/smp.css" media="only screen and (max-device-width: 480px)" />');
} else if (navigator.userAgent.indexOf('iPad') != -1) {
document.write('<link rel="stylesheet" href="css/iPad.css" />');
} else if (navigator.userAgent.indexOf('Android') != -1) {
document.write('<meta name="viewport" content="width=device-width, maximum-scale=1.0" />');
document.write('<link rel="stylesheet" href="css/smp.css" media="only screen and (max-device-width: 480px)" />');
};

どうぞよろしくお願い申し上げます。

回答No.2

ORUKA1951

そもそも、ウェブページを訪問するのは最新のブラウザやスマホだけじゃない・・・HTMLを作成する上での基本中の基本は・・
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　ここにあげているものだけじゃなく、検索エンジンと言うユーザーも忘れてはならない。

　そのためには、HTMLをきちんと文書構造に従って記述し、スタイルシートでユーザーエージェントごとにプレゼンテーションを変えることです。javascriptだと、javascriptを使えない--あるいは、Javascriptを停止しているユーザーには無効です。基本は、HTMLのheader内に記述されたmediatypeでのスタイルシート適用の振り分けです。もし他のスタイルシートでの表示もさせたければ、それは代替スタイルシートで用意しておけば良いです。
　基本は
★14.3 外部スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.3 )
　で、
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css">
<link rel="Alternate StyleSheet" type="text/css" media="screen,projection,tv" href="/styleSheet/default.css" title="汎用">
<link rel="styleSheet" type="text/css" media="print,handheld" href="./styleSheet/print.css">
とかですが、スマホなら

<link media="only screen and (max-device-width:480px)" href="m.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<link href="pc.css" rel="stylesheet" type="text/css" />
<![endif]-->

とかがよく使われる方法ですね。

　高度な方法として、cookieとCGIを使う下記のような方法もあります。下記サイトは、スマートフォン登場前のものですが、手法的には同じです。
★コンテンツ ( http://hpcgi1.nifty.com/Iruka/contents.html )
　ブラウザの表示メニューのスタイルシートで代替スタイルシートを選択することも、ページ内のボタンで変更することも出来ます。javascriptは使用されていません。

　フォームを使って同じページを読んでいますが、そのときにどのスタイルを選択したかのデータが送られ、HTML自体のスタイルシートへのリンクを書き換えています。

補足

ご回答ありがとうございます。
ユーザーに対しての配慮不足の件、ご指摘いただき、ありがとうございます。

仕組み的には文字サイズの大・中・小のCSS切り替えと
似たような感じでできるものでしょうか。

>> <link media="only screen and (max-device-width:480px)" href="m.css" type="text/css" rel="stylesheet" />
>> <link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet" />

これを使用した場合、PCの環境でウィンドウ幅を480px以下にした場合は、
「m.css」が適応されてしまうものなのでしょうか。

回答No.1

gadgetwatch

ワンソースでかつ手動でもCSSが切り替えられるようにするには、Cookieに「どっちのCSSで見たいか」を保存するしかないかなと思います。

Cookieがない場合は今のまま(UserAgentを見て、スマートフォンだったらスマートフォン版のCSSを、それ以外だったらPC版のCSSを読ませる)でいいですよね。

で、たとえばスマートフォンで「PC版へ」のリンクをクリックしたときには「PC版を見たい」という情報をCookieに書いた上でそのページを再読み込みさせます。
でもってその「PC版を見たい」というCookieがある場合は、たとえUserAgentがスマートフォン系のものだったとしてもPC版のCSSを読ませるようにすればよいのではないでしょうか。

ちゃんとコードが示せずすみませんが、ヒント程度にしていただければと思います。

お礼

回答ありがとうございます！
リンクに表示したいCookie情報と再読み込みをさせる発想はありませんでした。
いただいた内容をもとに参考になりそうなサイトを探してみたいと思います。
ありがとうございます！