レスポンシブデザイン：ユーザーがフルサイトを表示できるようにする

レスポンシブデザインを使用する場合、ユーザーにフルサイトを表示させる方法はありますか？レスポンシブデザイン：ユーザーがフルサイトを表示できるようにする

など。彼らはiPhoneで見ているが、フルサイトを見たい。彼らは "フルサイト"リンクをクリックすると、それらに1024pxバージョンが表示されます。

メディアクエリを使用している場合は、「応答性」クラスのボディエレメントの下にルールを適用するだけです。

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

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

デモ：白いテキスト、および背景の青に変わります超えない500pxなどに窓を削減http://jsbin.com/obaquq/edit#javascript,html

。これは、「反応性の」クラスを持つ身体の条件付きです。最初の段落をクリックすると、このクラスが切り替わり、メディアクエリ自体の効果が切り替わります。

2012-04-11 19:41:08 Sampson

これは完璧な答えです。つまり、jQueryのようなものを使ってモバイルデバイスであるかどうかを確認してから、レスポンシブなクラスを追加するべきですか？それとも別の方法ですか？ –

@NicHubbard私はデフォルトでレスポンシブサイトから始めます。つまり、デフォルトでは 'respondive'クラスをボディにロードします。人々は反応的な経験からオプトアウトします。 – Sampson

@NicHubbard次に、あなたのメディアクエリを使用して、小さな画面に "フルサイト"リンクのみを表示すると、リンクは '応答性クラス 'を削除します。 –

これを試したことはありませんでしたが、この問題については自分で考えました。私はあなたが完全なバージョンを残して、コア応答スタイルシートを非アクティブ化するスタイルシートスイッチャーを使用することができると想像してください

スタイルシートを切り替えることは確かに新しい概念ではありません。ここでは2001年頃のALAの記事で、スイッチングスタイルシートを扱っています：http://www.alistapart.com/articles/alternate/

2012-04-11 19:42:32 ckaufman

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

2012-04-12 19:36:50

答えて