www.talkjesus.com のモバイル スキンを最適化して、網膜をクリアにしようとしています。
これは、facebook/twitter アイコン、ロゴ、ヘッダーの右上の 3 つのアイコンなどのスタンドアロン イメージでも実現しました。
私が抱えている問題は、スプライト画像全体に対してこれを行うことです。
これはCSSコードです（デフォルト）
.ui-icon, .ui-icon-searchfield:after {
background-image: url({vb:stylevar imgdir_mobile}/metro-icons-24.png);
border-radius: 0;
background-color: transparent;
}
.ui-icon-plus {background-position:-0 50%}
.ui-icon-minus {background-position:-28px 50%}
.ui-icon-delete {background-position:-56px 50%}
.ui-icon-arrow-r {background-position:-84px 50%}
.ui-icon-arrow-l {background-position:-112px 50%}
.ui-icon-arrow-u {background-position:-140px 50%}
.ui-icon-arrow-d {background-position:-168px 50%}
.ui-icon-check {background-position:-196px 50%}
.ui-icon-gear {background-position:-224px 50%}
.ui-icon-refresh {background-position:-252px 50%}
.ui-icon-forward {background-position:-280px 50%}
.ui-icon-back {background-position:-308px 50%}
.ui-icon-grid {background-position:-336px 50%}
.ui-icon-star {background-position:-364px 50%}
.ui-icon-alert {background-position:-392px 50%}
.ui-icon-info {background-position:-420px 50%}
.ui-icon-home {background-position:-448px 50%}
.ui-icon-search,.ui-icon-searchfield:after {background-position:-476px 50%}
.ui-icon-checkbox-off {background-position:-554px 50%}
.ui-icon-checkbox-on {background-position: -530px 50%;}
.ui-icon-radio-on {background-position: -577px 50%;}
.ui-icon-radio-off {background-position: -601px 50%;}
これは元のスプライトです: http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-24.png
これは私が作った新しいものです、64px: http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-64.png
デフォルトでは、Retina スタイル イメージは、適用されるサイズの少なくとも 2 倍大きくする必要があります。この場合、元は 24px ですが、css コードを変更して新しいサイズを反映する方法がわからないため、24px のライブで表示しながら 64px バージョンから正しいアイコンを取得します。
ご協力いただきありがとうございます