スマホサイトの「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以下のレイアウトが入っています
}
----------
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
@mediaqueryが書かれていますので、そうは出来ない。
そもそも、そのリンクは必要ないような気がしますが・・
基本的には次のような扱いになるかと思います。
既存のPC用のHTML(URL)は変更されないのですよね。
幅広ディスプレイで訪問したばあいは、スマホへのリンクは押すことはないですが、不要ですからdispaly:none;で消せばよい。
スマホで訪問した場合にボタンをおして別のデザインを選択する必要はない。またmediaqueryが基本的に有効なので意味無いです。
問題は残っているスマホサイトに幅広ディスプレイで訪問する場合ですが、それは手を加えず放っておけば良い。
スマホもパソコンも基本的には同じmedia=screenですので、パソコンで小さくした場合もスマホ用デザインになりますし、スマホでも解像度の大きい、あるいはディスプレイサイズの大きいディスプレイだとパソコン用が表示されます。
それでもスマホやタブレットタッチパネルディスプレイの場合は、スマホ用のほうが良いということになりますからね。
ありがとうございます。mediaqueryが書かれているとできないのですね。
確かに、すべてデバイスが異なっても載せている内容が同じなら切り替える必要はありませんね。
じつはヘッダー・フッターの内容はPCとスマホで見せる内容を切り替える予定で、ページの内容がまったく同じではないためPCに切り替えるボタンがあったら良いな、と思った次第です。(ショッピングモール内のECサイトを作っており、通常のwebページより自由度がなく特殊なため、このような方法をとっています。)
No.2
- 回答日時:
javascript使えば一発です。
その場でMediaQueryをでっち上げることもできますよ。
いまどきjavascript切ってるクライアントも稀だと思うし、クレーム付いたこと一度もありません。
簡単頻繁につかうならこれがいいです。
MediaClassというライブラリです。
https://github.com/jonathantneal/MediaClass
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- Word(ワード) マイクロソフト2019の本を買ったのですが、本の説明では画面右下に表示モードの切り替えができて閲覧モ 5 2023/02/26 18:16
- 教えて!goo 先程質問を行い答えてくださった方がいらっしゃったのですが、お礼の仕方がわかりません。ネットで調べると 1 2022/11/23 23:12
- マウス・キーボード Bluetoothのクイックペアリングについて 8 2023/03/25 16:50
- VR・AR YoutubeでVRゴーグル用の切り替えボタンが表示されない? VRゴーグル(中にスマホを入れるタイ 3 2022/10/20 10:27
- Word(ワード) PCで作ったwordをスマホで編集しようとすると「このファイルは読み取り専用です。」と表示される。 3 2023/05/30 14:51
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- Gmail Googleアカウント管理でPCとAndroidスマホで見え方が違う 1 2023/05/29 18:56
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Macで画像の切り抜きできないの?
-
Input Type Buttonのサイズ変更
-
オンマウスで画像がぶれる(High...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
ワードにコピペ、画像が表示さ...
-
CSSがなぜかfont-sizeだけ効か...
-
div領域をウインドウサイズに合...
-
表示倍率を変えるとレイアウト...
-
箇条書きがずれて表示されてし...
-
ulタグやliタグの中でbrタグ...
-
htmlのolやulなどlistにtitleや...
-
超音波で洗脳。
-
pythonでのカーソル移動がずれる
-
CSS「table-cell」で横並びにし...
-
<h1>、<h2>と<p><div>の行間を...
-
レスポンシブWebデザインでリン...
-
テキストエリア送信の際の文字...
-
CSSでborderの長さを指定、また...
-
ASP.NETでプレーンなページに文...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Macで画像の切り抜きできないの?
-
iPadのスクリーン座標のサイズ...
-
HTMLソースの中で、画像を表示...
-
ヘッダーデザインをするさい形...
-
iPhone Safari 画像の幅指定が...
-
テーブルのセル内のマージン
-
cssで点線を表示する方法
-
ボタンの配置
-
画用紙 26cm×37.5cmは 何px で...
-
スタイルシートの"_width"って...
-
サムネイル自動生成プラグインn...
-
Pythonでエクセルファイルの列...
-
十進BASICでのプログラム
-
横幅が2880pxを超えるデザイン...
-
ベイシックのプログラミングに...
-
横幅が狭いホームページ
-
スペーサーGIFの作り方
-
ブラウザ上で画像が縦長に表示...
-
FEDORA15のアイコンを小さくしたい
-
htmlの文字が縦書きになる
おすすめ情報