web-kit ベースのブラウザーと Apple のデバイスに関連する devicePixelRatio が本当に役立つのか、それとも単に Apple の私有資産なのか、疑問に思うだけです。ご存知のように、web-kit エンジンもアップル社のものです。この種のことは Apple の Retina スクリーンにとってのみ意味があると思います。また、スクリーンの解像度と OS の解像度の違いは OS によって適切に処理されるべきであると常に考えています。それは私たちの仕事ではありません。
devicePixelRatio の値が 0 ~ 1000000 の範囲にある場合、それらの画面に何枚の画像を用意すればよいでしょうか。
1 に答える
Web ブラウジングはモバイル デバイス ユーザーにとって最も人気のあるアクティビティであり、Web ページ自体はさまざまな形やサイズで提供されます。
Apple とそれに続いてモバイル ハードウェアの分野に参入したさまざまな企業は、デバイスの使用と依存に費やす時間を最大化するために、Web ブラウジング エクスペリエンスを可能な限り簡単にする必要がありました。コンテンツを読むために、ユーザーがページをピンチしたり、ズームしたり、パンしたりしないようにする必要があったため、「メタ ビューポート」と呼ばれる API を Web 開発者に公開しました。彼らのウェブサイト。
後で彼らは、そのような方法でスケーリングすると、Apple Retina のような高 dpi デバイスや、Galaxy sIII や nexus デバイスのような Android デバイスで拡大すると、画像がまったくがらくたのように見えることに気付きました。そこで彼らは、可変の devicePixelRatio と対応する CSS メディア クエリを作成して、Web 開発者が、スケーリング後に Web サイトの見栄えを良くするために、特定のデバイスに高解像度の画像が必要であることを検出できるようにしました。Web サイトの所有者/開発者が、特定の物理サイズに対して通常の 2 倍のピクセル数のデバイスをユーザーの 0.2% がたまたま使用しているという理由だけで、サブピクセル データを含むビットマップをすべての人に提供するために 2 倍の帯域幅を浪費するとは誰も期待していません。
Web サイトの開発者は、ピクセル密度の高いデバイスで Web サイトの見栄えが悪くならないように、画像を選択的に提供するために余分な時間を費やすことのコストとメリットを比較検討する必要があります。ほとんどの Web サイトがこれを行っているところまで Web が到達した場合、消費者は、使用しているハードウェアの欠点が原因ではなく、あなたの Web サイトが低品質であるという印象を受けるでしょう。
明確にするために:
Apple は、devicePixelRatio に 1 と 2 のみを使用します。
Google は 1、1.5、および 2 の使用を推奨しています (ただし、常に強制できるわけではありません)。
Microsoft は、screen.deviceXDPI 値で 96dpi (1) 144dpi (1.5) 192dpi (2) を使用します。
ほとんどの人は、資産の 2x 解像度バージョンを、何らかのしきい値を超えるすべてのデバイスに提供するだけです。たとえば、1.3 および 1x バージョンをそれ以下のデバイスに提供します。これらすべてのデバイス値が正確に何を意味し、「CSS メディア クエリ」またはそれぞれの JavaScript 値を使用する方法を理解している Web 開発者にとっては、非常に簡単であり、想像しているほどイライラすることはありません。