针对不同的Android屏幕尺寸/密度扩展Phonegap应用？

Question

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.

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?

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.

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%;
    }
}

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

Here's some screenshots from a testcase Phonegap app:

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

Answer 1

Before we give up on phonegap lets try improve it. I was stuck until I solved it using this solution.

Change your viewport to this :

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

Ref : Phonegap Application text and layout too small

Answer 2

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.

For example:

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

Answer 3

根据Pete LePage（ https://plus.google.com/+GoogleChromeDevelopers/posts/BKHdSgQVFBB ），我们认为target-densitydpi已被弃用并从Webkit中删除，我认为更好的方法是使用媒体查询来定位高dpi丢弃phonegap之前的设备

Answer 4

I have a couple of different solutions to suggest:

1. Change viewport dynamically using Javascript ( more info here )

2. Set all sizes in rem units rather than px . Then you can scale everything by adjusting document font-size. Sketching an example:

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