jquery移动图像pixeleted

我注意到，phonegap中的JQuery Mobile在iPhone上工作正常。但是当我在android上运行类似的应用程序，特别是Ldpi（320X240）时，它不能正常工作。像按钮这样的图像是像素化的。任何关于此的帮助都非常困难。jquery移动图像pixeleted

谢谢进阶

来源

2012-10-17 srividya

请添加一些代码，你的问题的描述是一个很好的介绍，但在深度缺乏。 –

在Android应用程序，你可以为每个屏幕密度多个位图中res/drawable-ldpires/drawable-hdpi，等...

但它不会在这里工作，因为PhoneGap的将资产装入位图夹。但是，您可以使用css3媒体查询完全按照android在您的网页中进行操作。

为例：

为100px图片，将其命名为BTN-mdpi.png，
创建一个960x75像素的图像并将其命名为BTN-ldpi.png，
创建一个像素的图片命名为btn- hdpi.png，
然后创建一个200像素的图像将其命名为BTN-xhdpi.png

这里是你的网页的<head>：

<head> 
    <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"> 
    <style> 
    input { 
     background: transparent url(btn-mdpi.png); 
     height: 100px; 
    } 

    @media screen and (-webkit-max-device-pixel-ratio:0.75) { 
     input { 
     background: transparent url(assets/btn-ldpi.png); 
     height: 75px; 
     } 
    } 
    @media screen and (-webkit-max-device-pixel-ratio:1.0) { 
     input { 
     background: transparent url(assets/btn-mdpi.png); 
     height: 100px; 
     } 
    } 
    @media screen and (-webkit-max-device-pixel-ratio:1.5) { 
     input { 
     background: transparent url(assets/btn-hdpi.png); 
     height: 150px; 
     } 
    } 
    @media screen and (-webkit-max-device-pixel-ratio:2.0) { 
     input { 
     background: transparent url(assets/btn-xhpi.png); 
     height: 200px; 
     } 
    } 
    </style> 
</head>

对于每个密度，将使用与屏幕密度相匹配的不同位图。好消息它也将适用于iPhone 4及其视网膜显示器！

你可以阅读这个老罗曼nurik后更多地了解它：http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui

来源

2012-10-17 15:55:07 pcans

jquery移动图像pixeleted

回答

相关问题