スマホ表示・PC表示の切り替えについて

スマホサイトの「PCで見る」ボタンについてお伺いします。

今までPC用とスマホ用で2つのページを持っていたコンテンツのhtmlを書き替え、CSS3のメディアクエリを使ってPC用のページをスマホで見るとスマホ用のレイアウトで表示されるレスポンシブデザインを作っています。

そこで、スマホで見たときに今までリンクしていた「PCで見る」ボタンについて、以前は2つのコンテンツのURLが違っていたので「PCで見る」ボタンのリンク先の指定ができたところ、今回1つのURLになってしまったのですが、表示の切り替えはできるでしょうか？

CSSでブラウザ幅600px以上と599px以下で異なるレイアウトを読み込む書き方をしたので、599px以下のレイアウトに「PCで見る」ボタンを加えて、ボタンを押すと600px以上のレイアウトのCSSを読み込むよう切り替えられたらと思います。

以下、CSSファイルの内容
----------
@media (min-width:600px) {
600px以上のレイアウトが入っています
「PCで見る」ボタンは、非表示にする指定を入れたいと思います
}

@media (max-width:599px) {
599px以下のレイアウトが入っています

}
----------

No.2 回答者： shockatz 回答日時： 2015/03/16 14:01

javascript使えば一発です。

その場でMediaQueryをでっち上げることもできますよ。
いまどきjavascript切ってるクライアントも稀だと思うし、クレーム付いたこと一度もありません。
簡単頻繁につかうならこれがいいです。

MediaClassというライブラリです。
https://github.com/jonathantneal/MediaClass

No.1 回答者： ORUKA1951 回答日時： 2015/03/12 15:27

＠mediaqueryが書かれていますので、そうは出来ない。

そもそも、そのリンクは必要ないような気がしますが・・
基本的には次のような扱いになるかと思います。
既存のPC用のHTML(URL)は変更されないのですよね。
幅広ディスプレイで訪問したばあいは、スマホへのリンクは押すことはないですが、不要ですからdispaly:none;で消せばよい。
スマホで訪問した場合にボタンをおして別のデザインを選択する必要はない。またmediaqueryが基本的に有効なので意味無いです。
　問題は残っているスマホサイトに幅広ディスプレイで訪問する場合ですが、それは手を加えず放っておけば良い。

　スマホもパソコンも基本的には同じmedia=screenですので、パソコンで小さくした場合もスマホ用デザインになりますし、スマホでも解像度の大きい、あるいはディスプレイサイズの大きいディスプレイだとパソコン用が表示されます。
　それでもスマホやタブレットタッチパネルディスプレイの場合は、スマホ用のほうが良いということになりますからね。

この回答へのお礼

ありがとうございます。mediaqueryが書かれているとできないのですね。
確かに、すべてデバイスが異なっても載せている内容が同じなら切り替える必要はありませんね。

じつはヘッダー・フッターの内容はPCとスマホで見せる内容を切り替える予定で、ページの内容がまったく同じではないためPCに切り替えるボタンがあったら良いな、と思った次第です。（ショッピングモール内のECサイトを作っており、通常のwebページより自由度がなく特殊なため、このような方法をとっています。）

お礼日時：2015/03/15 22:49