レスポンシブ デザインを使用している場合でも、ユーザーがサイト全体を表示できるようにする方法はありますか?
例: iPhone で閲覧しているが、サイト全体を表示したい。「Full Site」リンクをクリックすると、1024px バージョンが表示されます。
レスポンシブ デザインを使用している場合でも、ユーザーがサイト全体を表示できるようにする方法はありますか?
例: iPhone で閲覧しているが、サイト全体を表示したい。「Full Site」リンクをクリックすると、1024px バージョンが表示されます。
メディア クエリを使用している場合は、'responsive' クラスを持つ body 要素の下にのみルールを適用します。
@media screen and (max-width: 320px) {
body.responsive {
color: blue;
}
}
ユーザーがレスポンシブ レイアウトを表示したくない場合は、body 要素から「responsive」クラスを削除して、すべてのルールを無効にします。Cookie やその他の方法でユーザー設定を保持することもできます。
デモ: http://jsbin.com/obaquq/edit#javascript,html
ウィンドウを 500px 以下に縮小すると、テキストが白くなり、背景が青くなります。これは、ボディが「レスポンシブ」クラスを持っていることを条件としています。最初の段落をクリックすると、このクラスが切り替わり、メディア クエリ自体の効果が切り替わります。
私はこれについて疑問に思っていました。jQuery を使用してビューポート タグを変更することに成功しました。これまでのところ、かなりうまく機能しているようです。複数のスタイルシートや多くの余分な CSS は必要ありません。
これを試したことはありませんが、この問題について自分で考えました。コアのレスポンシブ スタイルシートを無効にして、ユーザーに完全なバージョンを残すスタイルシート スイッチャーを使用できると思います。
スタイルシートの切り替えは確かに新しい概念ではありません。これは、2001 年頃の ALA に関する記事で、スタイルシートの切り替えに対処しています: http://www.alistapart.com/articles/alternate/