针对不同的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'; }