css - Retina解像度画面用の変換サイト

Question

Appleの新しいMacbookProは、解像度2880x1800の15インチ画面を備えています。現在、Webサイトを拡大縮小しているため、画像が2倍になり、レイアウトも2倍になります。

Web開発者として、既存のPHP / XHTML / CSS Webサイトを変換して高DPI画面を利用するにはどうすればよいですか？

Answer 1

次のページでは、まともなランスルーを提供しています。

http://www.webmonkey.com/2012/06/make-sure-your-site-looks-good-on-the-new-retina-macbook-pro/

アイコン フォントは 1 つのソリューションを提供し、@media タイプは追加のスタイルを使用できるようにします。

例：

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .logo {
        background: url(/path/to/my/highreslogo.png) no-repeat;
        background-size: 100px 100px;
        /* rest of your styles... */
    }
}

Answer 2

このスクリプトが役立つかもしれません - http://retinajs.com/。Retina ディスプレイ用にカットされた画像名に @2x を追加すると、スクリプトが残りの作業を行います。画像をカットする際の 1 つの落とし穴は、すべてが 2 で割り切れる必要があることです。これは既にご存じのとおりですが、ボタンを完璧に作成したが、ボタンの周りの 1 ピクセルの影/線を無視したため、これにつまずきました。:(

編集：この件に関する本当に素晴らしい記事/チュートリアルに出くわしました：

http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/

Answer 3

おそらく、Retina iPhone/iPad のソリューションは Retina Mac でも機能するでしょう。次のような高解像度の画像を示します。

background-image: url(your-image@2x.png);