私は、ユーザーがいくつかの名前を入力し、後で印刷して別のもの (紙、木材、金属など) にトレースするために、テンプレートに素敵なフォントでレンダリングされるサイトに取り組んでいます。
テンプレートが 4" x 3" 等身大であると仮定しましょう。すべてのデバイスで 4" x 3" の画像を表示できますか? フルサイズは、デバイスの解像度に応じて、すべてのデバイスで異なります。私の最終的な目標は、印刷ではなく画面から画像を追跡できるようにすることです。さらに詳細が必要な場合は、必要なものを確実に提供します. jqueryまたはkineticjs...
もう一度ありがとう、トッド
編集：明確にするために、表示したい4x3インチの画像があるので、ユーザーが実際の画面を測定すると、画像は4x3インチになります。
これは不可能ですが、回避策があります。
一般に信じられていることは正しいです。ブラウザーが意図的に仕様の推奨事項に違反しない限り、CSS の絶対測定値は役に立ちません。
画面上の CSS インチは 96 ピクセルです。「Retina」とズームベースのデバイスの場合は少し複雑ですが、それでもインチは信頼できません. CSS メディア クエリも役に立ちません。JS/DOM/など 仕様が役立つ場合もありますが、私の知る限り、ほとんどの場合、ましてやすべての場合を処理できるものを構築できた人はいません。
絶対単位の詳細については、CSS 3 ドキュメントのResolutions、Overriding Image Resolutions、およびAbsolute lengthsとそれ以前のバージョンを参照してください。しかし、ここに要約があります：
元の CSS では、インチはインチ、ピクセルはピクセルであると想定されていましたが、2 つの間の固定マッピングはありませんでした。しかし、CSS 2.1 では、定義を変更することなく、1 インチあたり 96 ピクセルであるという前提が追加されました。これは明らかに、ピクセルまたはインチのいずれかが実際のものではないことを意味します (96dpi の画面を使用している場合を除きますが、ほとんどの人はそうではありません)。
CSS 3 では、各 CSS デバイスがピクセルに「固定」するか、物理的な測定値に「固定」するかを選択する必要があると規定しています。印刷メディアなどの高解像度デバイスは物理的な測定値に固定し、コンピューター画面などの低解像度デバイスはピクセルに固定することを特に推奨しています。したがって、「… 物理単位は、物理的な測定値と一致しない可能性があります。」(実際には、96dpi デバイスを除いて、そうではありません。)
したがって、112dpi ラップトップでは、各デバイス ピクセルが 1 つの CSS ピクセルにマップされます。つまり、実際の 1 インチあたり 0.86 CSS インチになります。
15 インチの Retina MacBook Pro のような 220dpi のラップトップはどうでしょうか? OS X では、ユーザーは 2880x1800 の画面を直接使用するのではなく、1440x900 や 1680x1050 などの 5 つの仮想解像度から 1 つを選択します (そして、カバーの下では、ビデオカードは実際にはさらに高い解像度にレンダリングしてから 2880x1800 にダウンスケーリングしています. では、それはどのようにマッピングされるのでしょうか? ブラウザは、2x2 の 220dpi の実際のピクセルを 96dpi の CSS ピクセルにマッピングすることができます。または、128dpi の仮想ピクセルを 1x1 で 96dpi の CSS ピクセルにマッピングすると、1 インチあたり 0.75 インチの CSS が得られます. 両方を実行しているブラウザーを見つけることができますが、それらはすべて Safari によって設定された標準に徐々に順応しています. .
iPhone のような 326dpi のモバイル デバイスはどうでしょうか。モバイル WebKit はタップしてズームするように構築されているため、状況はさらに複雑になります。そのため、通常、指定されたサイズで物事を表示することはありません。しかし、CSS ピクセルあたり 4x4 デバイス ピクセル、つまり 1 インチあたり 1.18 CSS インチが最適です。
たとえば、1:1 と 2:1 のケース (96dpi と 192dpi として) を区別できるCSS 3メディア クエリですが、実際のマッピングを決定することはできません。
では、CSS が実際に機能しないのに、なぜこれだけ複雑な機能を備えているのでしょうか? 一つには、印刷出力で機能します。(印刷出力では、ピクセルは間違っているので、インチが正しいです。) もう 1 つは、固定サイズではなく視覚的な角度に基づいてデザインすることを奨励しています。まれなケースを除いて、56 インチ テレビで「ワイド」にします。しかし、主に下位互換性のためです。仕様にあるように、「... 既存のコンテンツが 96 dpi の仮定に依存しすぎており、その仮定を破るとコンテンツが壊れます。」
JS をどのように使用できるかについて詳細を説明することはしませんが、基本的な考え方は、ウィンドウが 1 つである画面の物理的な寸法などにアクセスして、96dpi からどれだけ離れているかを計算しようとすることです。例については、このページのソースを参照してください。しかし、それは本当にうまくいきません。たとえば、15 インチ 2800x1800/1680x1050 内蔵スクリーンと 21 インチ 1920x1200 外付けスクリーンを備えたラップトップを使用しています。最近の Firefox は、内部画面を 20.6 インチで 1680x1050、外部画面を 20.6 インチで 1920x1200 として検出します。Safari は、23.6 インチで 1920x1200 の両方を検出します。古いバージョンの Firefox は、20.6 インチで 3600x1200 の 1 つの画面としてそれらを検出します (そして、OS X から間違った情報を取得するのに非常に苦労しました…)。
WebKit や古い Firefox などを検出し、既知の問題を補うために実行できる追加の回避策があります。これにより、成功率が 1/6 からおそらく 1/2 に上昇する可能性があります。
Flash や Java の方がうまくいくかもしれませんが、画面サイズを測定するためだけにそれらをページに埋め込む価値はないと思います。
それで、これについて何ができますか？
最初の可能性は、HTML の代わりに PDF を使用することです。リーダー/プレビュー/その他で開かれるようにするには、配置を設定する必要がある場合があります。ブラウザのインラインの代わりに。一部のユーザーはリーダー/プレビューなどを持っている可能性があるため、これはまだ機能しない可能性があります。デフォルトでスケーリングされます。そして、それが常に機能していたとしても、これが受け入れられる答えではない場合がたくさんあります.
私が見た中で最高の純粋な Web ソリューションは、次のようなものです。
将来はどうですか？
この問題は厳密には秘密ではありません。Pixels Per Inch Awareness と CSS Pxがそれについて説明しています (正確なインチ数ではなく、正確なピクセル数を取得しようとする視点からですが、問題は明らかに補完的です)。一方、Introduction to CSS Media Queriesは、実際に利用可能なものを使用する方法についてのより実用的な「ハウツー」記事であり、実際に必要なものではない理由には触れません。これらおよび他の多くの記事は、現在の設計がいかに苦痛であるかを指摘しています。
これはwwwスタイルのリストに定期的に登場し、議論は常に次のようになります。ほとんどの場合、人々が物理的なインチが欲しいと考えるとき、彼らは間違っています. テレビや iPhone のように、視覚的に離れた場所で使用することを意図したブラウザーを考えてみてください。そのため、下位互換性の問題がなかったとしても、現在持っているものに近いものが必要になります。物理的なインチが役立つのは、「等身大」図の場合だけです。
しかし、「等身大」の図が必要な場合はどうでしょうか。ええと…すべての議論は、「本当にそれが必要な場合は、「in」ユニットを変更する代わりに「physin」ユニットを追加することを提案してください」と誰かが言って終了するようです。物理ユニット」、そして物事は徐々に消えていきます. 最終的には実現するかもしれませんが、今のところ実現していません。
以前にこの問題に遭遇したことがありますが、残念ながらそれは不可能です。コンピューター自体は画面のピクセル密度を知らないことがよくあります (画面のピクセル数はわかりますが、必ずしもディスプレイの大きさはわかりません)。面積は）です。
回避する方法はありますが、多くの場合、目標を変更する必要があります: スケール (1:2500 など) を表示するのではなく、過去にマップでこれを行ったとき、バーを表示しました。既知のピクセル数（そして私は実際の長さを知っています）。
あなたの場合、ユーザーに画面上の既知のピクセル数を測定し、実際のサイズを入力して、画像を生成するときにこれを倍率として使用することができます。
理想的ではありませんが、これが最善の方法だと思います。
編集：それを行う別の方法（ユーザーにサイズを測定して入力させるよりもおそらく優れています）は、画像のサイズを、彼らが横たわっている可能性が高い既知の現実世界のオブジェクトのサイズに変更できるようにすることです(たとえば、クレジットカード)。画像のサイズを変更すると、ピクセル密度がわかり、画像をレンダリングするサイズがわかります。これは、80 年代にジョイスティックを調整したことを思い出させます...