17

Android フォンとタブレットで実行するように設計された Phonegap アプリがあります。テキストと画像の縮尺はスマートフォンでは問題なく表示されますが、7 インチ タブレットでは小さすぎます。

Phonegap ベースのアプリで機能するさまざまな画面サイズ/密度のスケールを設定する方法はありますか? ネイティブ Android アプリの場合、複数の画面レイアウト ( android docsに記載されている) が解決策になりますが、これを 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ました。120 dpi に調整すると、7 インチ タブレットではスケールが改善されますが、スマートフォンでは大きすぎます。これは CSS ではなく HTML でハードコーディングされているため、メディア クエリを使用して画面サイズに基づいて変更することはできません。

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

テストケース Phonegap アプリのスクリーンショットを次に示します。

4

4 に答える 4

22

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

ビューポートを次のように変更します。

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

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

于 2013-12-28T09:38:24.997 に答える
4

私がこれに答えたことがないことに気づきました。最終的に使用した解決策は、メディア クエリを使用して、デバイス サイズに基づいてフォント サイズと画像アセットを明示的に設定することでした。デバイス テストでは、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');
    }
}
于 2014-06-11T15:00:50.737 に答える
2

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

于 2014-01-08T18:28:29.143 に答える
1

提案するいくつかの異なる解決策があります。

  1. Javascript を使用してビューポートを動的に変更します (詳細はこちら)

  2. すべてのサイズをpxではなくrem単位で設定します。次に、ドキュメントのフォントサイズを調整して、すべてを拡大縮小できます。例のスケッチ:

    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';
}
于 2013-11-22T13:33:39.657 に答える