it-swarm-ja.com

Webページ用のDPI独立UI

LCD=が標準になる前は、ほぼ10年間、画面は72または96 DPIでした(通常、トリニトロンディスプレイでのみ見られます)。しかし、現在120および144 DPIディスプレイは非常に一般的です。

Windows 7の登場により、デスクトップアプリのDPIの問題はある程度解決され、少なくともOSのUIが高DPIディスプレイで壊れることはありません。

今私たちはウェブページに行きます-DPIに依存しないウェブページの構築について友人と大きな議論がありました-私の見解は、UI要素はさまざまなシステムで同じサイズに見えるべきであり、すべてのCSS寸法はピクセルではなくインチで指定されるべきであるというものでした。

私はこのトピックをSO=で提起しましたが、インチを単位として使用することについて一般的な不承認がありましたが、それはかなり-uh-不合理だと思います。

わずか15.4インチのサイズの144 DPI画面があります-個々のピクセルのサイズは非常に小さいので、テキストのアンチエイリアスとサブピクセルのレンダリングは本当に効果的ですが、8ポイントのフォントがどれでも読むのに十分な大きさであると想定する多くのWebページが表示されますシステム。

これは、UI設計における大きな不快感と根本的な欠陥だと思います...実際に既存の環境に適応できる場合は、ユーザー環境について想定します。

1024x768用に設計されているため、2000年代の初期のWebページと1280x1024で適切に表示されないので、それほど違いはありません。

別の皮肉なことに、Firefoxのみが1インチの要素を1物理インチとしてレンダリングします。画面のDPIが96でない限り、他のすべてのブラウザーはオフです。明らかに、コードのどこかに値96がハードコードされています-これをGetScreenDPI( )または何かAPI呼び出し?

あなたの見解は?

6
rep_movsd

ピクセルはハードウェアレベルの概念であり、より多くのピクセルがより少ないスペースに詰め込まれているため、設計者は別の測定単位の使用方法を学ぶ必要があります。ボタンを100×200ピクセルに設計すると、100dpi画面を想定しているため、200dpi画面のユーザーはボタンの面積がareaになるので苦労します。

高ピクセル密度の画面を搭載したデバイスが増えるにつれて、設計者が設計対象のシステムの技術的側面を知っている場合、設計者は実際により多くの制御(および柔軟性)を得ることができます。

たとえば、物理的なサイズを指定しているので、ポイントでWebレイアウトを指定する方がより将来性があります(言及した実装のバグは除きます)。

別の例として、iOSデバイスの画面座標はポイントで測定され、新しい高密度画面のない古いデバイスでは、ポイントからピクセルへの1対1のマッピングがありました。 iPhone 4はピクセル数を2倍にしますが、画面のポイントサイズの寸法は同じに保ちます(そのため、古いレイアウトは引き続き機能しますが、新しいレイアウトでは、位置精度を高めるために分数寸法を使用できます)。

5
Brendan Berg

UIの設計にはパーセントを使用する方が良いと思います。次に、bodyタグに絶対値を入力できます。 JavaScriptを使用して、必要な場所で本体の絶対値を変更します。その後、あなたは他のすべてがOKになります。

JavaScriptパーツの場合、ユーザーの表示を認識して値を計算してみてください。それは簡単です。

1
Morteza Milani

グラフィックスと画面​​サイズの両方をピクセル単位で測定するときに、なぜインチを使用するのですか?解像度ごとに1インチあたりのピクセル数が異なるため、マージン、パディング、フォントサイズ(ptよりもpxまたはemを使用する方が良い)などをインチで測定した場合、画像の大きさ(ピクセルごとに作成された)ページ上になります。 800x600の解像度は常に800px x 600px に関係なく画面のインチ数であることは言うまでもありません。

Web開発/設計の専門家(または第一人者)になるには、できるだけ多くのユーザーがアクセスできるようにサイトを効果的に構築する方法を学びます。そして、そのために必要な技術は広く普及し、受け入れられるようになっています。私のポイントは、開発者がそこで仕事をしているなら、それは問題ではないはずです。そして、それがこのサイトが存在する理由の1つです。

1
LoganGoesPlaces

単位の一貫性;実際のインチ。 (72ポイントは1インチになります)

8ポイントフォント私は8 ptで解放モノラルが大好きですが、それはそれがそのような小さなサイズで非常に良いグリッドに適合しているように見えるだけです-一部のフォントは、細部を見ると奇妙に見えますが、細かいグリッドが適合しているように見えます

1280x1024(5:4)および1024x768(4:3)。小さいサイズから大きいサイズへと細かくスケーリングできますが、大きい画面を回転させる必要があります。これらの画面が同じサイズの場合、インチレイアウトは変更せずに機能しますが、2つの問題があります。1つは画面のテキストのレイアウトです。不明なサイズと正しいフォントサイズの取得

画面の解像度に応じてページを不変にできますが、画面のサイズと形状に不変にすることはできません

x11の下でサーバーが画面の実際のサイズとその解像度をxdpyinfoによって次のようにxdpyinfoによって報告されるので、mupdf(pdfビューア)をデフォルトの実際のサイズに変更しました。

_dimensions:    1280x800 pixels (301x192 millimeters)
resolution:    108x106 dots per inch
_

(ただし、作業領域の寸法が必要な場合は、拡張ウィンドウマネージャーのヒントで定義されたプロパティを読み取る必要があります:_NET_WORKAREA(CARDINAL) = 0, 25, 1280, 744

しかし、画面が短すぎて、PDFページでスクロールする必要があることを発見しました-ページングされたメディアが好きですが、ページングとスクロールを混在させるべきではありません

次に、縦向きモード21.5インチ液晶などのレターページよりも短い画面を取得することを考えました(ただし、そのサイズの液晶を108+ dpiの範囲で250以下に見つけることは困難です)我ら)

1
Dan D.