Web開発で複数の画面解像度とアスペクト比を処理するための戦略
かつては、800 x 600が設計対象の画面解像度でした-おそらく640 x 480でした。その後、1024 x 768などが登場しました。
しかし、それはさらに悪化します。現在、解像度が異なるだけでなく、アスペクト比も異なります。
人々は、今日拡大し続ける画面サイズとアスペクト比の範囲に対応するためにどのような戦略を使用していますか？
（ところで-私はラップトップ/デスクトップハードウェアのみを考えていましたが、もちろん考慮すべきスマートフォンやタブレットもあります。）
私はこれが幾分物議を醸す意見になることを知っていますが、とにかくそれを言うでしょう：Do n't
複数の画面サイズや縦横比に合わせて設計しないでください。もちろん、いくつかの例外があります。ウェブメールクライアントのようなヘビーウェブアプリケーションは、より多くの画面領域で間違いなく実行でき、おそらくとにかく幅広い画面サイズに対応するのに十分な柔軟性があります。上記のWebサイトのモバイルバージョンは、モバイル画面サイズの信じられないほどのスペクトルに対応するためのより柔軟なデザインで、モバイルのボリュームが大きいサイトにも役立ちます。ただし、いわゆる「デスクトップWeb」に固執する場合、画面サイズ、解像度、アスペクト比よりも重要なことは95％の時間であると言えると思います。
まず、簡単なものに取り組みましょう。なぜあなたがアスペクト比をそんなに気にするのか本当に理解していません-それは私たちが気にしているようなものではありませんthat「フォールド・ザ・フォールド」ナンセンスについてはもうそうではありませんか？ Webは垂直媒体です-Webサイトでは常にスクロールが行われます。魔法の600pxのラインより上にすべてを置くことは、ただの愚かです。
次に、画面の解像度/サイズ：繰り返しますが、防御するのは難しいと思います。
大画面のユーザーは、ほとんどのWebサイトがそれらを利用していないことに気付くため、通常、ブラウザーウィンドウを最大化しません。 Webはユーザーに適応しますが、ユーザーはWebにも適応します。これは鶏と卵の問題だと主張することはできますが、事実はウェブサイトは通常、最も低い共通分母向けに設計されています私はこの立場を擁護していません、しかし、むしろ、業界の現在の一般的な傾向としてそれを指摘します。
高すぎたり低すぎたりする解像度では動作しない特定のことがあります。たとえば、人々が画面で快適に読むことができる幅の狭い範囲があります。長くなり、次の行への目の移動量は迷惑になります。低すぎると、テキストがcr屈になります。 Webが解像度ニュートラルになるように設計されているという事実は、逆説的に、流動的なレイアウトを構築したい人のために多くの規定がなされていないことを意味します。 min-heightおよびmax-heightはもちろん役立ちますが、範囲が広いほど、より多くの困難に直面します。今日の技術で構築された真に柔軟なサイトでは、孤立した要素、移動した画像、背景がなくなるなどのことは避けられません。
私の意見では、複数の解像度を処理する最も簡単な方法は、それを完全に無視することであり、今日の技術ではとにかく多くのオプションはありません-そして、最小公分母の設計です。
高DPI設定に注意してください
今日のフロントエンドWeb開発が直面している最も議論の余地のない問題の1つは、高DPIシステムでのテストだと思います。誰もがさまざまなブラウザーでテストおよびテストとテストを行うことを学びましたが、デザイナー/開発者はさまざまなDPI設定でのテストに追いついていません。
高（または低）のDPI設定は、フォントが拡大縮小されているが画像が縮小されていない場合（発生する可能性がある）、デザインが破損し、画像がぼやけたりぼやけたりする可能性があり、絶対に配置されたオブジェクトが目的の場所に表示されない場合があります（これは、 CSSメニューに壊滅的な影響を与えます。）他に何もない場合は、高DPIで画像をテストし、必要に応じて再レンダリングします。
これは、Windows 7のリリースと高解像度モニターを搭載したコンピューターを購入する人々にとって、最近まで本当に問題になりませんでした。まず、Windows 7はデフォルトとして96DPIを使用します（これは、72DPIを標準として使用していた他のコンピューティングの世界とは異なります。さらに、Windows 7はDPI設定を自動的に調整し、通常の150％のDPI （Windowsでは96 DPI）。
この問題を詳細に説明している素晴らしいリンクがあります： http://webkit.org/blog/55/high-dpi-web-sites/
Web標準で設計された優れたクロスブラウザWebサイトが目標ですが、DPIテストを忘れないでください。
まあ、あまりにも長く答えを維持しようとすると、これは私がやっていることです。
（A）常に使用される可能性が最も高い比率/解像度から開始する
あなたの平均的なジョーが現代のラップトップまたはデスクトップマシンにある場合、彼はおそらくAT LEAST 1024x768（refs： w3schoolselykinnovation ）、おおよそ960pxの使用可能な幅が得られます（ 960gridシステム を確認することをお勧めします-私が最初にこれを書いて以来、新しいフレームワークがたくさんあります）。モバイルデバイスまたはタブレットを使用する場合は、最初にそれらについて考えてください。50％〜50％の場合、通常は小さいものから始めて成長することをお勧めします（例： Rock Hammer または Foundation
（B）レイアウト：流動的かどうか？
ウェブサイトの幅を広げることでメリットが得られる場合は、この解像度から始めて流動的なデザインを選択してください。人間の目は長い行でテキストを読むことを好まないので、流動的なデザインを乱用しないでください。多くの場合、大きなマージンで960pxに固執することが許容されます。本当に多くのスペースがある場合は、追加のサイドメニューを追加（javascript）することをお勧めします。しかし、可能な限りJSなしで動作するようにWebサイトを設計してください。
（C）その他の解像度
最後に、使用頻度の最も低い解像度でも問題がないことを確認します。
（D）その他のデバイス、比率、およびスタッフ
さまざまな比率のオプションはあまりありません。多くの場合、モバイル、iPad、AAA、または同様のデバイスで実行していることを意味します。
私のアドバイスは...これらのデバイス向けに特別に設計することです。
HTMLを作成するときは、必要なものを念頭に置き、デザインではなくセマンティックによってHTMLを実行することを忘れないでください。可能であれば、HTML5セマンティックタグを適切に使用してください。 <bold>または同様のタグを避け、代わりにCSSでスタイルを設定するタグとクラスを適切に使用します。
フレームワークを使用してください！
ただし、非常にさまざまなデバイス用にいくつかの異なるデザインを作成できます。 /同じデザインで/すべてをレスポンシブにする必要はありません。
クライアントに応じて異なるCSSを提供する方法はいくつかあります。あなたはそれをすることができます：
- サーバー側、Webサーバーまたは動的スクリプト環境のいずれかを使用して、クライアントからのHTTPヘッダーのブラウザーを確認します-python/Django、phpなど
- javascript（ウィンドウサイズは簡単に取得できます）
- html-特にiphoneなどの特定のデバイスの場合
いくつかの簡単なルールに従うことで、小型（モバイルなど）デバイスの一般的なデザインを簡単に作成できます。1.非常に小さい幅に収まる流体レイアウト2.あまりにも多くのスペースを無駄にしないコンパクトなヘッダー/フッター3.内容が少ない「ページ」ごと4.タッチデバイスでは機能しないため、オーバーエフェクトを避ける!!!
さらに先に進みたい場合は、個々のデバイスのカスタマイズを確認する必要があります。例はiphoneビューポートです。 Apple ref library を参照してください。
これは、開始するためのものです。経験と特定のニーズが残りを後押しします！
あなたのサイトはすべてのディスプレイで完璧に機能するわけではありません。可能なすべてのディスプレイを設計するのに十分な時間（または年/ 10年と言うべき）があったとしても、新しいデバイスが出てくるたびにそれをやり直さなければなりません。
私の開発では、まだ水平スクロールを避けようとしていますが、フローティングdiv /可変幅divでもそれほど難しくありません。しかし、それを超えて、私たちは実際に「そのためのアプリがあります」交差点にあり、特定のデバイス用に特別に設計されたディスプレイが必要です。
私が使用している戦略の1つは、1つのディスプレイへの依存を減らすことです。顧客は、おそらく自分のWebページ全体を見なくても、自分がやったことを実行できます。さまざまなサイズのデバイスでより適切にスケーリングする、より小さく/シンプルなWebページに機能を解析できます。
職場では、「パワー」が少しあります。「特定のブラウザ、特定のディスプレイ設定などで実行するように設計された内部Webアプリを開発できます」あなた自身のリスク」。これは、キャンパスの反対側にいるIEの使用を本当に拒否している1人の菜食主義者をなだめるために、開発にさらに1週間（さらにアップグレード/将来のメンテナンスに）費やすことにマネージャーに同意させた後費用の価値はありません。その場合、私たちは別のTimmyが必要であり、彼のお気に入りのIE以外のブラウザーで見栄えのする、より柔軟なWebアプリではありません。
これは一般的ですが複雑な質問であり、残念ながら単一の最適な解決策はありません。それはすべてあなたが持っているコンテンツの種類に依存します。流動的なレイアウトを使用するか、解像度ごとにサイトを設計することができます（ http://www.maxdesign.com.au/articles/resolution/ を参照）。流体設計の例については、これを確認してください- http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign
レスポンシブウェブデザインはあなたの質問に対する答えだと思います。これらの例とテクニックをご覧ください... レスポンシブWebデザイン