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/en-US/docs/CSS/image-rendering

没有好结果。

有什么建议吗？

提前致谢，克里斯蒂安

Answer 1

您的问题有解决方案。

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

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

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

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

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

按下并且拿着屏幕设备的Android粒状背景大型图象

1 个答案: