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

视网膜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 回答