为不同的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 meta viewport 属性 - 将其调整为120dpi可以在7英寸平板电脑上更好地缩放，但在手机上太大了。由于它是硬编码在HTML中而不是CSS中，因此无法使用媒体查询根据屏幕大小进行变化：

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

以下是一个 Phonegap 应用程序的测试用例截图：

• HTC HD2，target-density=default
• HTC HD2，target-density=120dpi
• Nexus 7，target-density=default
• Nexus 7，target-density=120dpi

- DaveAlden

---

这款应用程序（实际上是一系列应用程序）已经在安卓手机上编写、测试并且运行良好，现在我想将其扩展到7英寸带GPS功能的平板电脑上。使用适当的本地插件，它也可以在iPhone/iOS上运行良好，证明了Phonegap的价值，因为我不必编写和维护完全不同的Java和Objective-C版本。 - DaveAlden

直到你使用平板电脑... - Howard Pautz

因此，我在stackoverflow上提出这个问题并相信那些了不起的人们... :-) - DaveAlden

@HowardPautz 有点严肃。Dpa99c，你有没有研究过像Bootstrap或Foundation这样的响应式框架？ - Andrew Lively

@AndrewLively - 这些响应式框架不是在幕后使用CSS媒体查询吗？我已经布置好了我的JQM用户界面，所以我想知道是否有任何巧妙的技巧可以应用一个全方位的比例因子。否则，我可以通过一些繁琐的CSS3和媒体查询来实现解决方案，以选择不同的屏幕尺寸。 - DaveAlden

Answer 1

在我们放弃 PhoneGap 之前，让我们试着改善它。我卡住了，直到使用了这个解决方案才解决了问题。

将您的 viewport 更改为以下内容：

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

参考: Phonegap应用程序文字和布局过小

- Kennedy Nyaga

---

是的，“target-densitydpi=medium-dpi”是我需要的关键，谢谢。虽然我使用“target-densitydpi=high-dpi”，因为它更适合我的CSS。 - toddles_fp

Answer 2

我刚刚注意到我没有回答这个问题。最终我使用媒体查询来根据设备大小显式地设置字体大小和图像资源。设备测试表明，这在我所有的目标设备上都有效：iPhone、iPad、Android手机、7英寸Android平板电脑和10英寸Android平板电脑。希望能对其他人有所帮助。

例如：

/* 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');
    }
}

- DaveAlden

---

嗨，横屏模式下的手机怎么样？有什么建议吗？谢谢！ - user636525

你可以使用window.onorientationchange事件来向body添加/删除CSS类。详情请参见此处：https://dev59.com/42435IYBdhLWcg3wqB8x - DaveAlden

Answer 3

考虑到目标密度dpi已被弃用并根据Pete LePage的说法从Webkit中删除（https://plus.google.com/+GoogleChromeDevelopers/posts/BKHdSgQVFBB），我认为一个更好的方法是在放弃phonegap之前使用媒体查询来针对高dpi设备进行定位。

- JohnFalcon

---

根据浏览器而定，是的。Android 2.3会遵守它，而Android 4.4完全忽略它，并且会根据设备dpi神奇地自动调整缩放到适当的级别，不需要任何额外属性。 - andreszs

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 = 高宽比h/w; 将此替换为您应用程序的高宽比
   var ar = 1.17;
   // x = 缩放因子
   var x = 0.1; 
   var rem;
   if (h / w > ar) { // 高于高宽比
       rem = x * w;
   } else { // 宽于高宽比
       rem = x * h;
   }
   document.documentElement.style.fontSize = rem + 'px';
   }
   

- Per Quested Aronsson