jQuery Mobile视网膜显示图像选项? [英] jQuery Mobile retina display image option?

问题描述

有没有一种简单的方法可以在正确的设备上显示视网膜大小的图像，而在其他设备上显示标准大小的图像?我一直在网上搜索，有人建议使用jscript.基本上，我希望加载32x32图像.视网膜图标的宽度应该是32、36或更大吗?与16个标准宽度的图标

Is there a simple way to display retina size images on the correct device and the standard on others? i've been search online a some people suggest using a jscript. Basically I want the 32x32 images to load on. Also what size should a retina icon be, 32, 36 width or higher? In comparison to a 16 standard width icon

@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;
    }
}

推荐答案

对于视网膜，device-pixel-ratio应该为2. 图标图像文件应为36x36，CSS为background-size 18x18，以将其压缩.

The device-pixel-ratio should be 2 for retina. The icon image file should be 36x36 and CSS background-size 18x18 to squeeze it down.

请参阅本文的最后一部分:

Refer to the last section of this post: http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile

这篇关于jQuery Mobile视网膜显示图像选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！