按住屏幕设备可显示Android颗粒背景全尺寸图片

Question

我正在为iOS和Android 4.x开发带有phonegap（css3 + html5 + javascript）的应用程序。 在Android 4.0.3设备上，使用带有CSS的背景图像作为带有以下代码的按钮：

.mycssClass
{
   background-image:url(../images/myImage.png);
   background-repeat:no-repeat;
   background-size:100%;
   background-color:transparent;
   border:none;
   font-weight:300;
   ....
 }

现在，图像可以正确显示，但是如果我在屏幕上按住不放，它将变成颗粒状。 如果我删除background-size：100％; 解决了问题，但是图像显示尺寸不正确。 根据此帮助的建议，我添加了一些代码行来管理抗锯齿

https://developer.mozilla.org/zh-CN/docs/CSS/image-rendering

没有好结果。

有什么建议么？

预先感谢，克里斯蒂安

Answer 1

您的问题有解决方案。

由于CSS引擎和Android WebView组件中的抗锯齿机制之间存在差异，因此出现了问题。 CSS抗锯齿在缩放图像之前进行，缩放后将应用浏览器抗锯齿。

为了避免这种影响，您必须以某种方式禁用缩放。

有一种好的方法可以保留响应图像并避免缩放。 页面加载后，将背景替换为img标签，并将CanvasImage应用于背景。

CanvasImage用与执行时元素大小相同的画布替换img元素，因此不会缩放。

如果您对此有任何疑问，请随时与我联系。