web-dev-qa-db-ja.com

「フロントエンド」対「バックエンド」でのレスポンシブWebデザイン？

レスポンシブWebデザインを行うには2つの方法があるようです。 2つのメソッドを呼び出す方法はわかりませんが、フロントエンドとバックエンドであるとだけ言ってみましょう。

  • frontendつまり、ブラウザのサイズを変更するとレイアウトのサイズが変更される通常の方法です（例：Twitterブートストラップ、Foundationなど）。

  • バックエンドつまり、トップレベルドメインでモバイルバージョンまたはデスクトップバージョンをロードします。これはm.example.comとexample.comを持つことに似ていますが、スクリプトはexample.comでのみモバイルまたはデスクトップバージョンをロードします（m.example.comは不要）。

個人的に、私はフロントエンドの方法を少し「ハッキング」することを見つけ、それは望ましい結果を達成するために多くの思考/テストを必要とし、訪問者ごとのファイルサイズを大きくします。バックエンドの方法は単純明快で簡単に見えますが、訪問者ごとのファイルサイズは小さくなります。

私はバックエンドの方法に傾いています。しかし、フロントエンドの方法（Twitter Bootstrap、Foundationなど）はいたるところにあるようです。バックエンドの方法はあまり一般的ではないようであるため、バックエンドの方法に問題はありますか？

htmlcsswebsite-designresponsive-webdesignlayout
3
IMB

概要：レスポンシブWebデザイン（フロントエンドと呼ばれるもの）を使用します。

「バックエンド」バージョンを使用する場合、次の欠点があります。

  1. デスクトップ用とモバイル用の2つのWebサイトを作成する必要があります。または、2つの異なるWebサイトに同じコンテンツを自動的に出力するスマートカスタムソリューションを作成する必要があります。簡単ではありません。

  2. 訪問者がモバイルブラウザとデスクトップブラウザのどちらを使用しているかを判断する信頼できる方法を見つける必要があります。これは難しく、ハック的で、信頼できません（少なくともこれまで）。

  3. デスクトップとモバイルに対応する必要があるだけでなく、タブレットと大小さまざまなタブレットとモバイルがあるため、2つだけでなく複数のWebサイトを作成する必要があります。また、デバイスの画面サイズのリストは日々増加しています。

レスポンシブWebデザインを使用すると、上記のすべてが回避されます。また、堅牢なフレームワークと最新のテクノロジーに取り組むことができ、発生した問題を修正する多くの方法が見つかります。また、新しいブラウザーバージョンでは、レスポンシブWebデザインをより簡単かつ堅牢にする新しい機能が実装されています。

幸運を。

乾杯。

2
Mario Awad

フロントエンドに進む

Use a responsive framework, like Twitter bootstrap or similars、すべてのWebサイトを1つだけ作成します。

次に、use media queriesを使用して、モバイル用かどうかに応じて必要なCSSルールを切り替えます。

そして間違いなくswitch all you want to show or not in mobile and desktop by server side。

たとえば、huge banner on mobile is useless、htmlモジュールおよびサーバー側の条件を使用するスイッチの例は、次のようになります。

<?php if(isNotMobile()){ ?>
$this->loadModuleBanner(); //this loads html module
<?php } ?>

したがって、モジュールの作成が上手であればあるほど、サイトコードの読み取り、管理、スケーリングが容易になります。

2つの異なるWebサイトを使用すると、モバイル/パッド用の1つの開発チームとデスクトップ用の1つの開発チームがない場合、夢中になります。

2
itsme

このように考えてください。画面のサイズやデバイスに関係なく、コンテンツは同じプラス、特定のデバイスタイプに関連しない可能性のあるいくつかのアイテムを差し引いたものです。

これは、画面にコンテンツを表示し、そのコンテンツを印刷することに似ています。 screenおよびprintメディアには、別々のスタイルシートを使用できます。印刷物の閲覧専用に別のWebサイトを作成することはありません。

同様に、異なる画面サイズには個別のバックエンドは必要ありません。

MVCアーキテクチャを使用している場合、すべての変更はV (view)でのみ必要です。

1
karancan