0

正しいデバイスで網膜サイズの画像を表示し、他のデバイスで標準を表示する簡単な方法はありますか?私はオンラインで検索してきましたが、jscriptの使用を提案する人もいます。基本的に、32x32の画像をロードしたいと思います。また、網膜アイコンのサイズは32、36幅以上にする必要がありますか?16の標準幅のアイコンと比較して

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-resolution:240dpi){
.shopping_icon
{background-image:url(../images/shop_icon.png);-moz-background-size:776px 18px;-o-background-size:776px 18px;-webkit-background-size:776px 18px;background-size:776px 18px;}

この作品のようなものはありますか?

#track .ui-icon{background:url(../simgs/track_icon.png) 50% 50% no-repeat;background-repeat:no-repeat;width:36px !important;height:36px !important;margin:-5px 0 0 -18px;}
@media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (max--moz-device-pixel-ratio: 1.5) {
    #track .ui-icon {
    background: url(../simgs/track_icon.png);
    background-size:36px 36px;
    }
}
4

1 に答える 1

1

Retinaのdevice-pixel-ratio場合は 2 にする必要があります。アイコンの画像ファイルは 36x36 で、CSS はbackground-size18x18 である必要があります。

この投稿の最後のセクションを参照してください: http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile

于 2012-06-05T19:28:56.280 に答える