Question

是否有一种简单的方法可以在正确的设备上显示视网膜尺寸的图像，在其他设备上显示标准？我一直在网上搜索一些人建议使用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;
    }
}

Answer 1

视网膜device-pixel-ratio应为2。图标图像文件应为36x36，CSS background-size为18x18，以便将其缩小。

请参阅此帖子的最后一部分：http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile

jQuery Mobile视网膜显示图像选项？

1 个答案: