按住屏幕設備可顯示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元素，因此不會縮放。

如果您對此有任何疑問，請隨時與我聯系。