7

レスポンシブ デザインを使用している場合でも、ユーザーがサイト全体を表示できるようにする方法はありますか?

例: iPhone で閲覧しているが、サイト全体を表示したい。「Full Site」リンクをクリックすると、1024px バージョンが表示されます。

4

3 に答える 3

8

メディア クエリを使用している場合は、'responsive' クラスを持つ body 要素の下にのみルールを適用します。

@media screen and (max-width: 320px) {
  body.responsive {
    color: blue;
  }
}

ユーザーがレスポンシブ レイアウトを表示したくない場合は、body 要素から「responsive」クラスを削除して、すべてのルールを無効にします。Cookie やその他の方法でユーザー設定を保持することもできます。

デモ: http://jsbin.com/obaquq/edit#javascript,html

ウィンドウを 500px 以下に縮小すると、テキストが白くなり、背景が青くなります。これは、ボディが「レスポンシブ」クラスを持っていることを条件としています。最初の段落をクリックすると、このクラスが切り替わり、メディア クエリ自体の効果が切り替わります。

于 2012-04-11T19:41:08.770 に答える
2

私はこれについて疑問に思っていました。jQuery を使用してビューポート タグを変更することに成功しました。これまでのところ、かなりうまく機能しているようです。複数のスタイルシートや多くの余分な CSS は必要ありません。

http://creativeandcode.com/responsive-view-full-site/

于 2012-04-12T19:36:50.240 に答える
1

これを試したことはありませんが、この問題について自分で考えました。コアのレスポンシブ スタイルシートを無効にして、ユーザーに完全なバージョンを残すスタイルシート スイッチャーを使用できると思います。

スタイルシートの切り替えは確かに新しい概念ではありません。これは、2001 年頃の ALA に関する記事で、スタイルシートの切り替えに対処しています: http://www.alistapart.com/articles/alternate/

于 2012-04-11T19:42:32.917 に答える