android/phonegap應用多屏支持

我們正在爲使用html5，CSS3，JQM和phonegap的android平臺開發移動應用程序。由於Android手機中有各種不同的屏幕尺寸，我們無法找到適合多屏幕背景圖像或任何圖像的方法。背景圖片會適合體面在說的HTC One V，三星S3迷你，但將無法在更大的手機，如三星注等伸展android/phonegap應用多屏支持

我們已經使用

我們已經使用了320分辨率的圖像的方法* 480爲mdpi，hdpi，xhdpi文件夾和CSS3，如果需要，我們試圖在更大的屏幕上展開它們。使用的CSS：

/* bkground每個屏幕*/

welcomePage {
```
background:url('file:///android_res/drawable/back_welcome_2x.png') no-repeat center center; 
background-attachment:fixed; 
min-height:100%; 
background-size:cover; 
```
}
- 這不起作用圖像。
我們試圖通過將寬度=設備寬度，高度=設備高度，初始比例= 1.0改變視元數據，目標dpi的=設備-dpi和使用的528 * 909的圖像（例如）。這會稍微切割圖像，但適合屏幕。同時，用戶界面中的所有jquery移動組件都縮小了大小。我們不確定這是否正確。

對於靶向多達屏幕尺寸成爲可能，這是要考慮的參數？屏幕尺寸，分辨率還是DPI？

我們究竟能做些什麼來確保我們的背景圖像適合幾乎所有的android手機屏幕（如samsung Note）。

或者你能否告訴我們是否可以在任何一種方法上即興創作？

來源

2013-03-13 user2166711

我假設你的背景圖像不是瓦片。

不要拉伸圖像太多。它會使你的圖像看起來模糊或不清晰。與原生Android應用程序一樣，以多種分辨率發佈背景圖像。然後，您可以使用a handlebars helper非常簡單地選擇正確的圖像，如here所述。

的Javascript：

if (screen.width <= 480) { 
    imgFolder = 'img/low/'; 
} 
else { 
    imgFolder = 'img/high/'; 
} 

Handlebars.registerHelper('imgFolder', function() { 
    return imgFolder 
});

HTML：

<body style="background:url('{{imgFolder}}yourImage.png'); background-size:cover;" />

當然，你必須添加的分辨率LDPI/MDPI /華電國際/ xhdpi - 我不知道現在。我不認爲你可以在瀏覽器中使用androids內部大小調整機制使用谷歌瀏覽器的dp值（這不是dpi），所以你最好的選擇是使用4種最常見的分辨率（例如寬度爲320,480,600 ，800 - 我可能是錯的）和中等分辨率的縮小圖像。

對於Android，這通常使用4個影像文件夾：

LDPI
華電國際
MDPI
xhdpi

雖然他們有DPI在他們的名字，這不是你應該看的參數。作爲確定分辨率的參數，您應該使用screen.width - 在檢查完pg app/cordova瀏覽器具有1：1像素映射後。你這樣做，通過以下：

alert('screen size: ' + screen.width + ' x ' + screenheight + ' browser size: ' + $(window).width() + ' x ' + $(window).height());

的width和windowheight必須匹配的screen值。否則，您的圖像會縮放並且看起來不太好 - 而且您的應用程序看起來會比原生圖像差得多（除非不常見的情況下不使用任何基於像素的（.png/.jpg）圖像）。您可以使用媒體查詢修復映射，這可能有點煩瑣。

後，您已經完成了1：你可以使用screen.width 1像素映射（您將有比較screen.width和screen.height，如果您的應用程序同時支持橫向和縱向取較小值）。如果1：1映射出於某種原因不可能（應該儘可能避免的最壞情況），請使用window.innerWidth或$(window).width()。您的jqm行爲（使用您提供的元標記時縮小的大小）可能表示您的像素映射不如其準確。

爲所有的圖像縮放比率

3:4:6:8 (ldpi:mdpi:hdpi:xhdpi)

來源

2013-05-27 09:39:06 biodiv

android/phonegap應用多屏支持

welcomePage {

回答

相關問題