スマホと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)" />');
};
どうぞよろしくお願い申し上げます。
お礼
回答ありがとうございます nav リンクを横並びに設定すると 画面の大きいアンドロイドでは 横一列に綺麗に並びますが 少し画面の小さいアイフォンだと 中途半端に二列になっていたり アイフォンだとログイン画面のsubmitボタンが大きい枠組のdiv要素からはみ出していたりです。