web-dev-qa-db-ja.com

Phonegapアプリを異なるAndroid画面サイズ/密度に合わせてスケーリングしますか？

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インチタブレットではスケールが良くなりますが、電話では大きすぎます。これはCSSではなくHTMLでハードコーディングされているため、メディアクエリを使用して画面サイズに基づいて変更することはできません。

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

テストケースPhonegapアプリのスクリーンショットは次のとおりです。

androidcsscordovascaledpi
17
DaveAlden

私はこれに答えたことがないことに気づいた。最後に使用したソリューションは、メディアクエリを使用して、デバイスサイズに基づいてフォントサイズと画像アセットを明示的に設定することでした。デバイステストにより、これがすべてのターゲットデバイスで機能することが示されました。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');
    }
}
4
DaveAlden

Phonegapをあきらめる前に、それを改善してみましょう。このソリューションを使用して解決するまで、私は立ち往生しました。

ビューポートをこれに変更します：

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

参照： Phonegapアプリケーションのテキストとレイアウトが小さすぎる

22
Kennedy Nyaga

target-densitydpiが廃止され、Pete LePageに従ってWebkitから削除されたことを考慮してください（ https://plus.google.com/+ GoogleChromeDevelopers/posts/BKHdSgQVFBB ）、より良いアプローチは、phonegapをドロップする前にメディアクエリを使用して高dpiデバイスをターゲットにすることです

2
JohnFalcon

提案するいくつかの異なるソリューションがあります。

  1. 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';
}
1
Per Quested Aronsson