針對不同的Android屏幕尺寸/密度擴展Phonegap應用？

Question

我有一個Phonegap應用程序，旨在在Android手機和平板電腦上運行。 文字和圖像的比例在手機上看起來很好，但在7英寸平板電腦上卻太小了。

有沒有辦法設置適用於基於Phonegap的應用程序的不同屏幕尺寸/密度的比例？ 對於原生的Android應用程序，多個屏幕布局（如Android文檔中所述 ）將是一個解決方案，但這可以用於基於Phonegap的應用程序嗎？

我可以使用CSS媒體查詢根據屏幕大小設置字體大小，但我想按比例縮放整個界面（包括圖像）。

我嘗試使用CSS zoom屬性以及媒體查詢來定位特定的屏幕尺寸，但這會破壞絕對定位並干擾UI元素的功能，例如iScroll：

@media only screen and (min-device-width : 768px) {
    body{
        zoom: 125%;
    }   
}
@media only screen and (min-device-width : 1024px){ 
    body{
        zoom: 150%;
    }
}

我還嘗試使用targetdensity-dpi元視口屬性 - 將其調整為120dpi使得7“平板電腦上的刻度更好，但在手機上太大了。 由於這是在HTML而不是CSS中進行硬編碼，因此不能使用媒體查詢根據屏幕大小來改變它：

<meta name="viewport" 
   content="width=device-width, initial-scale=1, targetdensity-dpi=120dpi">

以下是來自測試用Phonegap應用程序的一些截圖：

• HTC HD2，目標密度=默認值
• HTC HD2，目標密度= 120dpi
• Nexus 7，目標密度=默認值
• Nexus 7，目標密度= 120dpi

Answer 1

在我們放棄phonegap之前，請嘗試改進它。 我被困住了，直到我用這個解決方案解決了它。

將視口更改為：

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

參考： Phonegap應用程序文本和布局太小

Answer 2

剛注意到我從未回答過這個問題 我最終使用的解決方案是使用媒體查詢根據設備大小顯式設置字體大小和圖像資源。 設備測試顯示這適用於我的所有目標設備：iPhone，iPad，Android手機，Android 7“平板電腦，Android 10”表。 希望它可以幫助別人。

例如：

/* Start with default styles for phone-sized devices */
    p,li{
        font-size: 0.9em;
    }
    h1{
        font-size: 1.2em;
    }
    button{
        width: 24px;
        height: 12px;
    }
    button.nav{
        background-image: url('img/phone/nav.png');
    }

@media only screen and (min-device-width : 768px) { /* 7" tablets */
    p, li{
        font-size: 1.3em !important;
    }
    h1{
        font-size: 1.6em !important;
    }
    button{
          width: 32px;
          height: 16px;
    }
    button.nav{
        background-image: url('img/tablet7/nav.png');
    }
}
@media only screen and (min-device-width : 1024px) { /* 10" tablets and iPad */
    p, li{
        font-size: 1.5em !important;
    }
    h1{
        font-size: 1.8em !important;
    }
    button{
        width: 48px;
        height: 24px;
    }
    button.nav{
        background-image: url('img/tablet10/nav.png');
    }
}

Answer 3

根據Pete LePage（ https://plus.google.com/+GoogleChromeDevelopers/posts/BKHdSgQVFBB ），我們認為target-densitydpi已被棄用並從Webkit中刪除，我認為更好的方法是使用媒體查詢來定位高dpi丟棄phonegap之前的設備

Answer 4

我有幾個不同的解決方案建議：

1. 使用Javascript動態更改視口（ 此處有更多信息 ）

2. 以rem單位而不是px設置所有大小。 然后，您可以通過調整文檔字體大小來擴展所有內容。 草繪一個例子：

    function resize() { var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; var styleSheet = document.styleSheets[0]; // ar = aspect ratio h/w; Replace this with your apps aspect ratio var ar = 1.17; // x = scaling factor var x = 0.1; var rem; if (h / w > ar) { // higher than aspect ratio rem = x * w; } else { // wider than aspect ratio rem = x * h; } document.documentElement.style.fontSize = rem + 'px'; }