15

PhoneGap アプリを作成しています。私のアプリは 32​​0px のインターフェイスとして設計されています。アプリ内のビューポート タグは次のとおりです。

<meta name="viewport" content="width=320, initial-scale=0.5, maximum-scale=0.5, user-scalable=no"/>

これは、Ice Cream Sandwich を実行している Galaxy S2 で期待どおりに動作します。320px のインターフェイスは、画面の幅全体を埋めます。

ただし、Galaxy Nexus で上記のコードをテストすると、ビューポートの幅は 360px になります。だから私の要素は画面を埋めません。Cordova の appname.java ファイルに次の行を追加しようとしました。

this.appView.getSettings().setUseWideViewPort(true);

ただし、これは効果がありません。

4

3 に答える 3

13

これを次のように置き換えてみてください。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

特定のデバイスに合わせてサイズを変更する必要がありますが、これをテストすることはできません。

于 2012-12-15T11:44:56.290 に答える
5

私が見る答えは非常に近いですが、彼が持ち出した1つのポイントを無視しています.彼のインターフェースは320px用に設計されています. width=device-width を指定すると画面に収まりますが、インターフェースが 320px のままになるとは限りません。

私の解決策は、Wayneio の回答に基づいて少し構築し、必要な CSS / マークアップを提供して、必要なスタイルシートが 1 つだけであることを確認することです (レスポンシブである必要はありません)。

<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
</head>
<body>
    <div id="interfaceWrap">
        // insert interface here
    </div>
</body>
</html>

このマークアップが行うことは、CSS を介してプロパティを設定できる特定のコンテナーにインターフェイスを限定できるようにすることです。私がお勧めするのは、次のようなものです。

#interfaceWrap {
    position: relative;
    width: 320px;
    margin-left: auto;
    margin-right: auto;
}

これは基本的に、メタタグビューポートがページ幅を設定しても、インターフェースを水平方向の中央に配置し ( margin-left & margin-right: auto)、幅 320px に固定する ( ) ことをブラウザに伝えますwidth: 320px。スタイルを自由に組み合わせて、本当に探しているものを手に入れることができます。

お役に立てれば！

于 2012-12-19T14:08:49.977 に答える
3

これを使って

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

メタタグのカスタマイズについては、このプレゼンテーションを確認してください

于 2012-12-20T05:07:16.793 に答える