扩展Phonegap应用程序的不同Android屏幕尺寸/密度?

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

有没有一种方法来设置不同的屏幕尺寸/密度,适用于基于Phonegap的应用程序的规模? 对于原生的Android应用程序,多个屏幕布局(如在Android文档中提到的)将是一个解决scheme,但是这可以用于基于Phonegap的应用程序吗?

我可以使用CSS媒体查询设置基于屏幕大小的字体大小,但我想按比例缩放整个界面(包括图像)。

我尝试使用CSS zoom属性以及媒体查询来定位特定的屏幕大小,但是这样会导致绝对定位并干扰iScroll等UI元素的function:

 @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"> 

以下是一个testing用例Phonegap应用程序的截图:

  • HTC HD2,目标密度=默认
  • HTC HD2,目标密度= 120dpi
  • Nexus 7,目标密度=默认
  • Nexus 7,目标密度= 120dpi

Solutions Collecting From Web of "扩展Phonegap应用程序的不同Android屏幕尺寸/密度?"

在我们放弃电话之前,让我们尝试改进它。 我被卡住了,直到我解决它使用这种解决scheme。

将您的视口更改为:

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

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

刚注意到我从来没有回答过 我最终使用的解决scheme是使用媒体查询来根据设备大小显式设置字体大小和图像资源。 设备testing显示,这在我的所有目标设备上都能正常工作: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'); } } 

考虑到根据Pete LePage( https://plus.google.com/+GoogleChromeDevelopers/posts/BKHdSgQVFBB ), target-densitydpi已被弃用并从Webkit中删除,我认为更好的方法是使用媒体查询来定位高分辨率设备之前下降phonegap

我有几个不同的解决scheme来build议:

  1. dynamic改变视口使用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'; }