サイトのスマホ表示について教えてください。

質問

同じＨＭＴＬファイルで、ディスプレイサイズに応じて異なる2つのCSSを読み込ませています。

サブドメインや、別ディレクトリーに、スマホ用のhtmlファイルはありません。
同じHTMLで別々のCSSです。

大手サイトでは「スマホサイトはこちら」、「ＰＣ版はこちら」というリンクをよく見かけます。多くのサイトは、スマホ用のディレクトリーやサブドメインに飛ぶようなのですが、これを、サブドメインやスマホ用のディレクトリーを使わずに、一つのhtmlファイルで行うには、どうすれば良いのでしょうか？

回答No.2

noname#249914

クッキーを使った切り替えの具体的なコードは以下が参考になると思います。jQueryの導入が必須になります。

■jQueryでcookieによるスマホサイトの切り替え
https://gist.github.com/Noriakky/5841251

■jquery.cookie を使ってサイトの状態を保存する
http://weback.net/javascript/2137/

回答No.1

muuming2001

具体的なソースは記述しませんがアイディアを記載します。

PC版を見るクリック　→　
javascriptでクッキーにて例えば　mode=pc 　をブラウザにわたしてページリロード。

スマホ版を見るクリック　→
javascriptでクッキーにて例えば　mode=smart 　をブラウザにわたしてページリロード。

ページを表示するときにはjavascriptにてクッキーmodeの値を取得し
pcならpc用のsmartならスマホ用のcssを読み込む

もっといいやりかたあるかもしれませんが、アイディアの一つデス。

お礼

アイディアありがとうございます。
いただいたアイディアを実現する上で、どこかにそのまま使えるコードが置いてあったりするのでしょうか？
もしそうであれば、この機能を取り入れたいと思います。