Retinaスクリーン用のグラフィックスの適応

iPhone4で嫌に見えるサイトに出くわすことは非常に多く、ポイントはほとんどが小さな画面に適合していないということではなく、開発者は新しいタイプの画面を考慮していないということです。 私はアイコンを見たくない、ボタンをクリックしたくないが、写真からは一般的に…サイトを閉じたい。 ユーザーをサイトに誘い、その本質を掘り下げ、そこにそのまま残すことを意図していないものは、今ではまったく逆に機能します。 しかし、iPhoneユーザーは一般的にこの状況に慣れています。なぜなら、 電話はフルブラウジングを置き換えることはできません。



しかし、最近では、Appleは物事を進めるためにiPad 3に小さな有利なスタートを切った。 iPadはすでにその可能性を最大限に活用しているので、サイトはラップトップやデスクトップコンピューターよりも悪くないはずです。 また、iPad 3は、同じラップトップでRetinaスクリーンを完全に実装するための最初の一歩に過ぎず、固定モニターではその背後にあると考えています。 AppleはすでにRetina向けにOSを準備していますが、Windows 8では、インターフェイス設計の新しいアプローチにより、おそらくこれでも問題はありません。





ここまで来たら、グラフィックを高ピクセル密度の画面に適応させる方法に直接進みます。

方法1. SVGを使用する

.selector { background: url(../path_to_png/apple.png) no-repeat; } html.svg .selector { background-image: url(../path_to_svg/apple.svg); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ロゴ、アイコン、ベクターグラフィックスに最適です。



この方法では、最高品質の結果が得られます。 グラフィックはどのズームでも等しく鮮明に見えます。 ただし、SVGはベクター形式であり、グラフィックはそれぞれベクターである必要があります。 SVGファイルを準備するには、Adobe Illustratorまたは別のアナログ（Inkscape、CorelDRAW）を使用できます。



その後、すべてが非常に簡単です。 CSSプロパティbackground-imageでSVGファイルへのパスを指定するだけで十分です。 ただし、 SVGをサポートしないブラウザーがあります 。 この場合、 HTML5ボイラープレートテンプレートの一部としてModernizrを使用することをお勧めします。これにより、ブラウザーバージョンではなく、直接サポートされる機能を定義できます。

方法2：CSSメディアクエリとbackground-sizeプロパティ

 .selector { background: url(../path_to_png/apple.png) no-repeat; } @media (-webkit-min-device-pixel-ratio: 2) { .selector { background-image: url(../path_to_png/apple@2x.png); background-size: cover; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

min-device-pixel-ratioセレクターを使用して、ピクセル密度が2以上のデバイスが検出され、2倍大きい画像が接続され、background-size：coverプロパティにより、この画像をサイズに合わせて拡大縮小する必要があることがブラウザに通知されます割合を維持するブロック。 background-sizeプロパティとそれが取り得る値について読んでください。

方法3.写真のsrcを置き換える

 jQuery( document ).ready(function(){ if( 'devicePixelRatio' in window && window.devicePixelRatio == 2 ){ var img_to_replace = jQuery( 'img.replace-2x' ).get(); for (var i=0,l=img_to_replace.length; i<l; i++) { var src = img_to_replace[i].src; src = src.replace(/\.(png|jpg|gif)+$/i, '@2x.$1'); img_to_replace[i].src = src; }; } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

HTMLコードでは、必要なクラス、幅、または高さを<img>タグに割り当てて、拡大された画像がデザインを損なわないようにします。

 <img src="../path_to_png/apple.png" width="200" height="200" class="replace-2x" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このメソッドは、window.devicePixelRatioプロパティを使用して、密度を高めた画面を決定し、適応する必要があるすべての画像を見つけ、srcを「@ 2x」を追加して同様の画像に置き換えます。 各画像のクラスを書きたくない場合は、上記のコードを変更して画像を検出するのは非常に簡単です。 私の意見では、この方法は最良ではなく、非常に注意して使用します。

方法4. Cookieとオフサーバーソリューション

 (function(){ if( document.cookie.indexOf('device_pixel_ratio') == -1 && 'devicePixelRatio' in window && window.devicePixelRatio == 2 ){ document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';'; window.location.reload(); } })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このメソッドを使用すると、JavaScriptを使用してCookieを一度設定し、ページをリロードできます。 さらに、このCookieに基づいて、サーバーは、密度を高めた画面に適合した画像をすぐに発行することを決定できます。





最後に、デモへのリンクであるRetinaスクリーンを備えたデバイスの所有者のみが違いに気付くでしょう。

最後に

CSSのパワーを最大限に活用して、ページにボタン、影、グラデーション、その他の要素を作成してください。 このような要素は、どのような規模やピクセル密度でも見栄えがしますが、古いブラウザーの場合は、適切な劣化を忘れないでください。



Retinaの画面に適応する際に遭遇した問題と、私が見逃した解決策についてお聞かせください。