为不同的 Android 屏幕尺寸/密度缩放 Phonegap 应用程序？答案

【问题标题】：Scaling a Phonegap app for different Android screen sizes/densities?为不同的 Android 屏幕尺寸/密度缩放 Phonegap 应用程序？
【发布时间】：2013-10-27 16:22:21
【问题描述】：

我有一个专门用于在 Android 手机和平板电脑上运行的 Phonegap 应用。文字和图像的比例在手机上看起来不错，但在 7 英寸平板电脑上太小了。

有没有办法为基于 Phonegap 的应用设置不同屏幕尺寸/密度的比例？对于原生 Android 应用，多屏幕布局（如 android docs 中所述）将是一种解决方案，但这可以用于基于 Phonegap 的应用吗？

我可以使用 CSS 媒体查询根据屏幕大小设置字体大小，但我想按比例缩放整个界面（包括图像）。

我尝试使用 CSS zoom 属性和媒体查询来定位特定的屏幕尺寸，但这会破坏绝对定位并干扰 iScroll 等 UI 元素的功能：

@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 应用的一些屏幕截图：

【问题讨论】：

该应用程序（实际上是series of apps）在安卓手机上编写、测试并且运行良好，我只想将它扩展到支持 GPS 的 7" 平板电脑。它也可以在iPhone/iOS（带有适当的原生插件），证明了 Phonegap 的价值在于我不必用 Java 和 Objective-C 编写和维护两个完全独立的版本。
直到您使用平板电脑...
因此我的问题和对 stackoverflow 上优秀人员的信心... :-)
@HowardPautz Something serious。 Dpa99c，您是否研究过任何响应式框架，例如 Bootstrap 或 Foundation？
@AndrewLively - 就像我说的，我喜欢 phonegap，因为人们看到类似的东西并认为它会比独立于移动设备的切片面包更好。 ...直到他们咀嚼一段时间...

标签： android css cordova scale dpi

【解决方案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 Application text and layout too small

【讨论】：

是的，“target-densitydpi=medium-dpi”是我需要的关键，谢谢，尽管我使用“target-densitydpi=high-dpi”，因为它更适合我的 css。跨度>

【解决方案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');
    }
}

【讨论】：

嗨，在手机横屏模式下怎么样？有什么建议吗？谢谢！
您可以使用 window.onorientationchange 事件向正文添加/删除 CSS 类。 See here了解详情

【解决方案3】：

考虑到 target-densitydpi 已被弃用，并根据 Pete LePage (https://plus.google.com/+GoogleChromeDevelopers/posts/BKHdSgQVFBB) 从 Webkit 中删除，我认为更好的方法是在删除之前使用媒体查询来定位高 dpi 设备电话间隙

【讨论】：

取决于浏览器，是的。 Android 2.3 尊重它，而 Android 4.4 完全忽略它，并根据设备 dpi 神奇地将缩放调整到适当的级别，根本没有任何附加属性。

【解决方案4】：

我有几个不同的解决方案要建议：

使用 Javascript (more info here) 动态更改视口

以 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';
}

【讨论】：