我使用phonegap和jQuery手機來開發一個Android應用程序時，佈局模糊/低質量時，jQuery手機在Android上使用phonegap

我使用phonegap和jQuery手機來開發一個Android應用程序。在瀏覽器中，頁面看起來很好，但是當我在設備上運行應用程序（=在web視圖中）時，頁面看起來便宜而且......關閉。幾乎就像頁面縮小了101％或類似的東西。有其他人遇到這個問題嗎？任何想法如何解決它？我使用phonegap和jQuery手機來開發一個Android應用程序時，佈局模糊/低質量時，jQuery手機在Android上使用phonegap

2012-06-04 Stefan

您帶來了工作的罰款。我也遇到了同樣的問題。它在仿真器中看起來很好，但在設備中搞砸了。我試着設置@dSquared的建議。它比最初的嘗試更好。但窗體控件和按鈕邊緣模糊...任何想法？ – RameshVel

您是否嘗試過在頁面的</head>這樣添加target-densitydpi=device-dpi值視meta標籤：

<head>  
    <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi" /> 
    ... 
</head>

這應該做的伎倆;我希望它有幫助！

2012-06-04 20:35:44 dSquared

謝謝！看起來很脆，但很小。我如何使jQuery控件和字體顯得更大？還是會讓他們再次模糊？ – Stefan

@Stefan嘗試在視口元標記中放置'initial-scale = 1.0'和/或'maximum-scale = 1.0'。如果你的應用是全寬的話，還要確保你有'width = device-width'。 – dSquared

我擁有所有這些。我嘗試將初始縮放比例設置爲1.5，但現在它再次變得糟糕透頂。在1.6的時候稍微好一些，雖然... – Stefan

在jQuery forum上還建議將user-scalable=0添加到不斷增加的元標記中。所以它最終看起來類似於：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi, user-scalable=0">

此fixit爲我工作。雖然jQuery的論壇帖子還提出最終的解決辦法可能包括一些Android的特定CSS：

- if is_android? 
    %link{:rel => 'stylesheet', :type => 'text/css', :href => '/stylesheets/mobile/android.css'}/

2013-02-04 19:59:07 thunkens

我在移動設備上進行測試時，也有同樣的問題。但是，請參閱本link：

CSS的「PX」單元可以從設備的實際像素比你要求的不同，作爲瀏覽器的「尺度」上的圖像和字體，以更大的尺寸。（瀏覽器很自然地假設你沒有真正的意思是「像素」當你說「PX」，並有益嘗試調整你的內容，使可讀性高分辨率手機屏幕。）

然後，我將TARGET-DENSITYDPI更改爲「target-densitydpi = 150」，並且正常工作（在NEXUS 10上測試）。

2013-02-15 03:22:17

嘗試將空白字符「」放在圖像的同一個承包商中，我不知道它是否正確，但它對我有用。

2014-01-06 09:50:42 Tawan

實際上，沒有任何字體大小副作用的真正解決方法是按如下方式處理 CSS文字陰影。

* { 
text-shadow:0 0 0 transparent; 
text-shadow:none; 
}

這可以確保您的字體沒有陰影，這就是文字看起來模糊的原因。如果仔細觀察，您可以看到文字實際上並不模糊，但具有相同顏色的投影。

2014-03-09 21:20:13 Cain

Webkit使用'css像素'，然後重新計算物理設備的分辨率 - 可能這是這裏的問題。

如果你有一個典型的4" 的手機用480x800的屏幕時，CSS像素可以是320x533和CSS像素比率將是1.5。

在這種情況下一個32×32PX圖像需要有至少48 x 48px看起來不錯和鋒利因爲有些設備的像素比例爲2（iPhone 4/5），我通常使用2倍大的圖像，它們看起來非常好，幾乎和svg圖像一樣好（並且沒有問題寬度老的瀏覽器）。

這樣做，你需要記住定義圖像尺寸

background:url('myimage64.png'); background-size:32px 32px;

或

<img src='myimage64.png' width='32' height='32'>

2014-07-23 13:47:00 user3868948

回答