DOM値「window.devicePixelRatio」およびCSSプロパティ「device-pixel-ratio」は変数になります

2010年の夏にiPhone 4の販売が開始されてから2年以上が経過し、過去2年間、サイトビルダーはwindow.devicePixelRatio （またはCSSでdevice-pixel-ratioメディアクエリを使用）をJavaScriptを使用してすぐに確認することに慣れていますサイトがRetinaディスプレイで実行されているかどうか。 devicePixelRatioの値が2の場合、 Retinaディスプレイ（4番目のiPhone、4番目のiPod Touch、3番目のiPad、またはそれ以降のデバイス、またはRetina Displayポータブルコンピューターを搭載したMacBook Pro）があります。 devicePixelRatioの値が1に等しい（または定義されていない）場合、通常の定義の表示になります。



Appleに比べて、Androidを実行しているデバイスを考慮するのは少し複雑です。1つまたは2つではない小数値を認識する必要があります。 Peter-Paul Kochは、ブログ記事 「 devicePixelRatioの詳細 」で、Nexus OneではdevicePixelRatioの値が 1.5であるのに対し、Galaxy NexusとGalaxy NoteではWebKitで2、2.25 で 2.25であると述べています。 Opera Mobile。



しかし、これらの小さな違いは全体として全体像を変えることはありません：誰もが同じ携帯電話（またはタブレット、ラップトップ）で絶えず一定であるようなデバイスのプロパティとしてdevicePixelRatioの値について考えることに慣れています 。 特に、すべて、Habrahabrブログエントリのレシピ「 Retinaスクリーンにグラフィックを適合させる 」、「 javascriptで Retina ディスプレイを認識する 」、「 Leafletを使用 してRetina ディスプレイを考慮してiPhone 4にOpenStreetMapマップを表示する 」、「 区別方法SafariのiPadバージョン 」、「 Retinaスクリーン用のグラフィックスの最適化 」、「 Retina用の包括的なサイト準備 」など。



しかし、2012年11月がやってきました。この習慣を捨てる時です。古いレシピを批判的にレビューする時です。 理由を説明します。



Peter-Paul Kochがブログ投稿 「 More about devicePixelRatio 」を更新し、彼が直接目撃したことを追記に書いたときに最初の鐘が鳴りました。OperaMobile のブラウザーでのdevicePixelRatioの価値はズーム（ズーム）に依存します。



Firefoxバージョン18でdevicePixelRatioのサポートが登場すると 、2番目のベルが鳴りました。この値は、ページの拡大機能としても設定されていました。



W3C参加者が、「 ズーム下でのdevice-pixel-ratioの振る舞い 」というテーマの文字でのwwwスタイルのメーリングリスト内で、 devicePixelRatioの値が物理的な数（画面）ページのCSSピクセルあたりのピクセル -それがどのように達成されたか（ Retinaディスプレイを埋め込むか、キーボードのCtrl +を押すだけ）は、 誰も気にしないでください。



紳士、読者の皆さん。 devicePixelRatioには特定のデバイスに固有の定数値があることを永遠に忘れることができます。 これは真実ではありません-むしろ、今では常に真実ではありません 。



このようなニュースには、良い面と悪い面の2つの側面があることは明らかです。



おそらく、すべてのサイトビルダーが、値devicePixelRatioによってデバイスを識別する以前の試みが将来的には常に成功するとは限らないことを喜んでいるわけではありません。



おそらく、すべてのサイトビルダーが、ドキュメントを操作する最初の段階で（ load または readyイベントにより）JavaScriptでdevicePixelRatioを読むだけで十分であることに満足するわけではありません。読者が変更した場合、変更された場合、変更されたページ倍率に合わせて画像の解像度を調整する必要があります。



一方、 読者は喜ぶでしょう。 以前は、インターネットから特定の画像の高解像度バージョンを取得するには、このバージョンを表示できるRetinaディスプレイを備えた高価なApple機器を購入する必要がありました。 そして、今度はキーボードのCtrl- +を数回押すだけで十分です-もちろん、サイト作成者がdevicePixelRatioへの応答を変更するか、CSSのデバイスピクセルに基づいてメディアリクエストを送信するのを忘れない限り、サイトからダウンロードされ、画像が2倍になります-ratio 。



将来、 イメージセットプロパティの2月の提案が受け入れられた場合、サイト構築のこの特定のニュアンスがさらに簡素化されることを期待できます。

selector { background: image-set(url(foo-lowres.png) 1x, url(foo-highres.png) 2x) center; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

WebKit が3月に導入したことは言うまでもありません。



刺激的です。 未来は輝いて見える。



写真のサイズを2倍にすることで、3倍、4倍などが可能になることに注意してください-読者が増加を抑える準備ができているため、サイトビルダーが同じイラストのさらに大きなバージョンを提供する準備ができているためです。