調整Phonegap應用UI而無需目標densitydpi = device-dpi

我已經爲Android平臺創建了一個使用Phonegap的應用。爲了補償不同的設備分辨率（dpi）和屏幕尺寸，所有UI元素的尺寸均以em爲單位進行了規定。然後，我使用CSS媒體查詢使用-webkit-device-pixel-ratio設置不同的基本字體大小。所有用於正常工作並按預期工作，直到我發現target-densitydpi = device-dpi已被webkit棄用且未來支持將被刪除。這裏是移除目標densitydpi之前我中繼檢視區標記：調整Phonegap應用UI而無需目標densitydpi = device-dpi

<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, target-densitydpi=device-dpi">

我發現，當我刪除目標densitydpi，應用程序看起來不再如預期，實際上視口的尺寸顯着降低。這裏是採取的Xperia L（的Android 4.1.2）具有480像素的寬度和window.devicePixelRatio 1.5之前和之後的屏幕截圖：去除靶densitydpi後 http://imgur.com/c0Vnusk

：

去除目標densitydpi前： http://imgur.com/06mnUlJ

該應用應該看起來像沒有target-densitydpi的前截圖，但我真的失去了如何實現這一目標？是否需要重寫CSS值？有沒有辦法強制執行target-densitydpi = device-dpi而不使用meta標籤？

來源

2014-02-23 mujtaba_ahmad

[Support for target-densitydpi從WebKit中移除]的可能重複（http://stackoverflow.com/questions/11592015/support-for-target-densitydpi- is-removed-from-webkit） –

我發現使用jQuery

我添加以下代碼解決方案，它可以作爲目前預計，（我已經添加了ID =「視」我的元html標記）

var viewportScale = 1/window.devicePixelRatio; 
$("#viewport").attr("content","user-scalable=no, initial-scale="+viewportScale+", minimum-scale=0.2, maximum-scale=2, width=device-width");

這將支持window.devicePixelRatio範圍從0.5到6的屏幕

來源

2014-02-24 05:28:58

你也可以做到這一點沒有jQuery： document.getElementById（「viewport」）。setAttribute（「content」，「user-scalable = no，initial-scale =」+ viewportScale +「，minimum-scale = 0.2，maximum-scale = 2，width = device -寬度」）; – NiloVelez

調整Phonegap應用UI而無需目標densitydpi = device-dpi

回答

相關問題