css - Web開発で複数の画面解像度とアスペクト比を処理するための戦略

Question

当時は、800 x 600が設計対象の画面解像度であり、おそらく640 x 480でした。その後、1024x768などが登場しました。

しかし、さらに悪化します。現在、解像度だけでなく、アスペクト比も異なります。

今日の拡大し続ける画面サイズとアスペクト比に対応するために、人々はどのような戦略を使用していますか？

（ところで-私はラップトップ/デスクトップハードウェアについてのみ考えていましたが、もちろん、考慮すべきスマートフォンやタブレットもあります。）

Answer 1

これが多少物議を醸す意見であることは承知していますが、とにかくこう言いたいと思います。

複数の画面サイズや縦横比に合わせて設計しないでください。もちろん、いくつかの例外があります。Web メール クライアントのような負荷の高い Web アプリケーションは、より多くの画面領域を確実に処理できます。また、さまざまな画面サイズに対応できる柔軟性を備えていることは間違いありません。上記の Web サイトのモバイル バージョンは、モバイル画面サイズの驚異的な範囲に対応するためのより柔軟なデザインを備えており、モバイル ボリュームの多いサイトにも役立ちます。ただし、いわゆる「デスクトップ Web」に固執する場合、95% の時間で、画面サイズ、解像度、アスペクト比よりも重要な問題があると言えます。

まずは、簡単なものから挑戦してみましょう。なぜそんなにアスペクト比を気にするのか、私にはよくわかりません。Web は縦型の媒体です。Web サイトでは常にスクロールが必要です。すべてを魔法の 600px ラインより上に置くのは、ばかげています。

次に、画面の解像度/サイズ: 繰り返しますが、防御するのは難しいと思います。

大画面のユーザーは通常、ブラウザー ウィンドウを最大化することはありません。これは、ほとんどの Web サイトがそれらを利用していないことに気付いているためです。Web がユーザーに順応する一方で、ユーザーも Web に順応します。これはニワトリが先か卵が先かの問題だと主張することもできますが、ウェブサイトは通常、最小公倍数に合わせて設計されているという事実に変わりはありません。 私はこの立場を擁護しているわけではなく、業界の現在の一般的な傾向として指摘しています.

解像度が高すぎたり低すぎたりするとうまくいかないことがあります。たとえば、ユーザーが画面上で快適に読めるように幅の狭い範囲があります。これ以上、次の行への目の移動量が煩わしくなります。低すぎると、テキストが窮屈に見えます。Web がレゾリューション ニュートラルになるように設計されているという事実は、逆説的に、流動的なレイアウトを構築したい人向けに多くの準備がなされていないことを意味します。min-heightもちろん助けにmax-heightなりますが、範囲が広いほど、より多くの困難に直面することになります。今日のテクノロジーで構築された真に柔軟なサイトでは、孤立した要素、移動した画像、背景がなくなるなどの問題は避けられません。

したがって、私の意見では、複数の解像度に対処する最も簡単な方法は、それを完全に無視することです。今日のテクノロジでは、とにかく多くのオプションはありません。最小公分母の設計を行います。

Answer 2

高い 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 テストも忘れないでください。

Answer 3

まあ、答えを長くしすぎないようにしようとして、これが私がしていることです.

(A) 常に使用される可能性が最も高い比率/解像度から開始します

あなたの平均的なジョーが最新のラップトップまたはデスクトップマシンにいる場合、彼はおそらく少なくとも1024x768（参照：w3schools elykinnovation）を持っているため、おおよそ使用可能な960pxの幅が得られます（960グリッドシステムを確認することをお勧めします-私が最初にこれを書いて以来、地獄のような新しいフレームワークがたくさんあります)。ユーザーがモバイル デバイスやタブレットから始める可能性が高い場合は、まずそれらについて考えてください。50% から 50% の場合は、通常、小さいところから始めてから成長させる方がよいでしょう。ロックハンマーまたはファンデーション

(B) レイアウト: 流動的かどうか?

あなたのウェブサイトがより広い幅の恩恵を受けることができる場合は、この解像度から始めて流動的なデザインを選択してください. 人間の目は長い行のテキストを読むのを好まないので、流動的なデザインを乱用しないように注意してください。多くの場合、余白を大きくして 960 ピクセルに固執することは許容されます。本当にもっと多くのスペースがある場合は、いくつかの追加のサイドメニューを (javascript) 追加することをお勧めします。ただし、できるだけ JS なしで機能するように Web サイトを設計してください。

(C) その他の決議

最後に、最も使用頻度の低い解像度でも問題がないことを確認します。

(D) その他の仕掛け、比率など

さまざまな比率のオプションは多くありません。多くの場合、モバイル、iPad、AAA、または同様のデバイスで実行していることを意味します。

私のアドバイスは、これらのデバイス専用に設計することです。

HTML を作成する際は、必要なものを念頭に置いて、デザインではなくセマンティックで HTML を作成することを忘れないでください。可能であれば、適切な HTML5 セマンティック タグを使用してください。< bold > または類似のタグは避け、代わりに CSS でスタイルを設定するタグとクラスを適切に使用してください。

フレームワークを使おう！

ただし、非常に異なるデバイス用にいくつかの異なるデザインを作成することはできます。/同じデザインで/すべてをレスポンシブにする必要はありません。

クライアントに応じて異なる CSS を提供する方法はいくつかあります。あなたはそれを行うことができます：

1. サーバー側で、Web サーバーまたは動的スクリプト環境 (python/django、php、またはその他のもの) を使用して、クライアントからの HTTP ヘッダーでブラウザーをチェックします。
2. javascript (ウィンドウサイズを簡単に取得できます)
3. html - 特に iphone などの特定のデバイスで

いくつかの単純なルールに従うことで、小型 (モバイルなど) デバイス向けの一般的なデザインを簡単に作成できます。 per 'page' 4. :over エフェクトはタッチ デバイスでは機能しないため、避けてください!!!

さらに先に進みたい場合は、個々のデバイスのカスタマイズを確認する必要があります。例は iphone ビューポートです。apple ref ライブラリを参照してください。

これは、開始するためのものです。経験と特定のニーズが残りを駆り立てます!

Answer 4

あなたのサイトは、すべてのディスプレイで完璧に機能するわけではありません。考えられるすべてのディスプレイを設計するために 1 日 (または 1 年または 10 年) に十分な時間があったとしても、新しいデバイスが登場するたびにやり直す必要があります。

私の開発では、私は依然として水平スクロールを避けようとしていますが、フローティング div / 可変幅 div ではそれほど難しくありません。しかし、それを超えて、特定のデバイス用に特別に設計されたディスプレイが必要な「そのためのアプリがある」岐路に立たされています。

私が使用している戦略の 1 つは、単一のディスプレイへの依存を減らすことです。おそらく、顧客は目的を達成するために Web ページ全体を見る必要はありません。機能を解析して、さまざまなサイズのデバイスでより適切にスケーリングできる、より小さく単純な Web ページにすることができます。

職場では、いわばもう少し「力」があります-「特定のブラウザ、特定の表示設定などで実行するように設計された内部Webアプリを開発できます.-他の構成を使用します.あなた自身のリスク」。これは、IE の使用を拒否するキャンパスの反対側にいる 1 人の菜食主義者をなだめるためだけに、開発に余分な 1 週間 (およびアップグレード/将来のメンテナンスにさらに多く) を費やすことに管理者が同意した後にのみ行われます。 . その場合、別の Timmy が必要です。お気に入りの IE 以外のブラウザーで適切に表示される、より柔軟な Web アプリではありません。

Answer 5

これは一般的ですが複雑な質問であり、残念ながら最適な解決策は 1 つではありません。それはすべて、あなたが持っているコンテンツの種類によって異なります。流動的なレイアウトを使用したり、解像度ごとに異なるサイトをデザインしたりできます ( http://www.maxdesign.com.au/articles/resolution/を参照)。流体設計の例については、これをチェックしてください - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

Answer 6

レスポンシブ Web デザインがあなたの質問に対する答えだと思います。これらの例とテクニックをご覧ください...レスポンシブ Web デザイン