缩放PhoneGap的应用程序，为不同的Andr​​oid屏幕尺寸/密度？ [英] Scaling a Phonegap app for different Android screen sizes/densities?

问题描述

我有一个PhoneGap的应用程序设计的Andr​​oid手机和平板电脑上运行。文本和图像的规模看起来不错的手机，但太小了一个7平板电脑。

I have a Phonegap app designed to run on Android phones and tablets. The scale of text and images looks fine on a phone, but too small on a 7" tablet.

有没有一种方法来设置一个适合一个PhoneGap的基础应用规模，为不同的屏幕尺寸/密度？对于原生的Andr​​oid应用程序，多屏幕布局（如提到的机器人文档）将是一个解决方案，但是可以这样用于PhoneGap的基础应用程序？

Is there a way to set the scale for different screen sizes/densities that works for a Phonegap-based app? For a native Android app, multiple screen layouts (as mentioned in the android docs) would be a solution, but can this be used for a Phonegap-based app?

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

I could use CSS media queries to set font sizes based on screen size, but I want to scale the entire interface (including images) proportionally.

我尝试使用CSS 变焦随着媒体查询属性针对特定的屏幕尺寸，但这种螺丝了绝对定位，干扰用户界面元素，如iScroll的功能

I tried using the CSS zoom property along with media queries to target specific screen sizes, but this screws up absolute positioning and interferes with the function of UI elements such as 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硬codeD而不是CSS，媒体查询，不能用于改变它根据屏幕大小：

I also tried using the targetdensity-dpi meta viewport property - adjusting it to 120dpi makes the scale better on the 7" tablet, but too large on the phone. Since this is hard-coded in HTML rather than CSS, media queries can’t be used to vary it based on screen size:

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

下面是一个测试用例的PhoneGap应用程序的一些截图：

Here's some screenshots from a testcase Phonegap app:

• HTC HD2，目标密度=默认
• HTC HD2，目标密度= 120DPI
• 的Nexus 7，目标密度=默认
• 的Nexus 7，目标密度= 120DPI

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

推荐答案

只注意到我从来没有回答过这个。我曾经在最后的解决方案是使用显式设置根据设备尺寸字体大小和图像资源媒体查询。设备的测试表明这个工作对我所有的目标设备：iPhone，iPad的，Android手机，Android的7平板电脑，Android的10表。希望它可以帮助别人。

Just noticed I never answered this. The solution I used in the end was to use media queries to explicitly set font sizes and image assets based on the device size. Device testing showed this worked on all my target devices: iPhone, iPad, Android phones, Android 7" tablets, Android 10" tables. Hope it helps someone else.

例如：

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

这篇关于缩放PhoneGap的应用程序，为不同的Andr​​oid屏幕尺寸/密度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！