我有一个旨在在 Android 手机和平板电脑上运行的 Phonegap 应用程序。文字和图像的比例在手机上看起来不错,但在 7 英寸平板电脑上太小了。
有没有办法为基于 Phonegap 的应用程序设置不同屏幕尺寸/密度的比例?对于原生 Android 应用程序,多屏幕布局(如android 文档中所述)将是一种解决方案,但这可以用于基于 Phonegap 的应用程序吗?
我可以使用 CSS 媒体查询根据屏幕大小设置字体大小,但我想按比例缩放整个界面(包括图像)。
我尝试使用 CSSzoom
属性和媒体查询来定位特定的屏幕尺寸,但这会破坏绝对定位并干扰 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 应用程序的一些屏幕截图: