Question

在phonegap中使用混合应用程序时，在特定设备上进行测试时会出现问题。

所有.png图像都会出现这种情况，为了解释的目的，描述了650px x 650px。

图像作为背景加载，其尺寸比原始分辨率小得多。

用户可以选择图像和捏合手势来放大/缩放CSS。
这在开发方面很有效，并且在各种设备上进行测试时很好。图像放大，清晰度就是你想要的期望的。
在用户放大图像时在特定设备上呈现颗粒状如果orrigional小表示是其最大尺寸所以当在细节上丢失，锋利的边缘变得锯齿状模糊，...如果应用程序更改屏幕，那么我们制作当前显示：无，然后更改回来，图像完整光辉的解决方案就像其他所有设备一样。

所以我们有一个设备发生故障但我们不知道有多少其他设备会出现相同的行为。

我们尝试强制进行GPU渲染，设置图像分辨率CSS，以最大尺寸加载图像并缩小尺寸但没有任何效果。

我想避免重新加载图片或模拟屏幕更改。这将在其他不需要它的设备上引入负载。

有谁知道如何修复或预防？我们可以在应用中更改或检测哪些设备设置可能会导致此问题？还有其他人经历过这个吗？

Answer 1

我找到了解决方案。

我尝试了各种不起作用的东西。许多事情已被忽略，并确定导致解决方案的因素。

将背景图像重置为自身。

ele.style.display = "none";
ele.display = "block";

这没有做任何事。

因此，我尝试将样式表交换为具有不同名称的相同图像的样式表，同样没有。

然后我将显示设置为“none”并返回“block”。不幸的是，如果我没有在这些活动之间设置超时，那么应用程序就不会重新绘制。

所以

ele.style.display = "none";
setTimeout(function() {ele.display = "block";}, 0);

没用。

也没有

ele.style.display = "inline-block";
setTimeout(function() {ele.display = "block";}, 10);

当我将等待时间增加到4毫秒时，它会起作用！除了屏幕上有明显的空白期间＆gt;为4ms。

所以我想到了什么会导致重绘而没有视觉效果。在像素抖动或边界中有很多事情会产生轻微影响。我正要测试设置一个背景颜色变化，不应该注意，因为背景是一个图像，然后我想，内联块和块对我的应用程序没有不同的视觉效果，所以我试过。

onCreated

我把计时器重新放入，因为没有它它并不总是有效。 Ta da，晶莹剔透的图像，没有其他视觉干扰或失去响应能力。更好的是，在没有显示图像质量下降的设备中，不会有性能损失。