2012-03-21 7 views
0

私はウェブサイトを作っています。このウェブサイトはデスクトップ、タブレット、スマートフォン用の3種類のモックアップを持っています。私はrespond.jsを使って幅を特定できます。CSS3レスポンス・レイアウト - どの方法を選択できますか?

しかし、私はどのように適切なデバイスにデザインを切り替えることができます質問です。私は、クエリセレクタを使用して幅と高さを変更することができますが、どのように私はページの内容を変更することができます..

良いアイデア。以前私はすべてのコンテンツをダウンロードし、ディスプレイを使用して不要なコンテンツを隠すために使用しました:none、これは間違っていることを知っています。これは最良の方法ですが、サーバー側のコードを使用して検索することは別ですか?

おかげ

+1

[CSSメディア](http://webdesignerwall.com/tutorials/responsive-design-in-3-steps) [クエリ](http://deanhume.com/Home/BlogPost/responsive-design-and-css3-media-queries/60)では、JSを必要とせずに探しているものを正確に実行します。 – jolt

答えて

0

は、すべてのモックアップタイプのデザインテーマを作成し、マークアップで同じCSSクラスを使用します。ウィンドウサイズのクライアント側をチェックし、ウィンドウ側に基づいて適切なテーマをロードします。

+0

あなたは、jsを使用してコンテンツのシャッフルを意味しますか? – 3gwebtrain

+0

私の意見では、あなたのクライアントサイドがどのモックアップテーマが適用可能かを知った後にJSでCSSファイルをロードするべきであるということです。 JSは正しい設計テーマをロードする必要があります。デザインテーマは通常、一連のCSSファイルです。 –

0

モバイルブラウザーのユーザーエージェント文字列(サーバー側)を検出し、それに従ってコンテンツを表示することが賢明だと思います。

PHPを使用してビルドする場合は、このawesomeスクリプトをチェックしてください。

使用法は、このようなものである。また、

if($isMobile){ 
    header('Location: http://m.youdomain.com/' . urlencode($_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'])); 
    exit(); 
} 

チェックアウトSwitcher

関連する問題