1

フォルダーの下で UI を開発commonし、タブレット用のスキンを作成して名前を付けますandroid.tablet。しかし、タブレット シミュレーターで実行すると、次のようになります。

ここに画像の説明を入力

以下のコードを使用しますskinLoader.js：

var userAgent = navigator.userAgent;
var skinName = "default";
//android tablet
if(userAgent.toLowerCase().indexOf("android") != -1 &&
    userAgent.toLowerCase().indexOf("mobile") == -1){
    skinName = "android.tablet";
    alert("tablet!");
}
//android phone
else if(userAgent.toLowerCase().indexOf("android") != -1 &&
    userAgent.toLowerCase().indexOf("mobile") != -1){
    skinName = "default";
    alert("default!");
}

HTML:

<div data-role="page" id="homePage" class="fullWidth">
    <div data-role="header" data-tap-toggle="false">
        <div class="ui-title">...</div>
    </div>
    <div data-role="content" style="text-align: center">
        <a href="#" data-role="button" id="login" class="fullWidth">Login</a>
    </div>
</div>

CSS:

.fullWidth{
    width: 100% !important;
}

フルスクリーンにできないのはなぜですか？私が欠けているコードはありますか？

4

2 に答える 2

2

Worklight Skins トレーニング モジュールを読んだことを確認しましたか?

Worklight スキンの基本的な前提は次のとおりです。

  1. 新しい Worklight プロジェクト、アプリケーションを作成する
  2. スキン対応環境の追加 (Android、BlackBerry 6/7/10、iPhone、iPad)
  3. 簡単にするために、skinLoader.js を更新して、スキンのフォルダー (「android.skin」など) を指すようにします。
  4. スキンのそれぞれのフォルダーに CSS ファイルと JS ファイルを作成します。
  5. HTML ファイルを common から skin フォルダーにコピーします。
  6. 色の変更やアラートの追加など、スキン フォルダー内の CSS、JS、および HTML で必要なことを行います。
  7. すべてをビルドしてデプロイ
  8. 色とアラートが表示されていることを確認し、ロードされたのがデフォルトではなくスキンであることを確認します。

スキンの Web リソースをプレビューするには:

  1. android 環境フォルダーを右クリックします。
  2. [実行] >> [プレビュー...] を選択します。
  3. スキンドロップダウンからスキンを選択します
  4. 実行ボタンをクリックします

スキンが表示されるはずです (プレビューでは Web リソースのみが表示され、ネイティブ パーツがある場合は表示されません)。

これが失敗した場合は、次のように URL を変更してみてください。
これにより、基本的に MBS コンテナーが取り除かれ、Web リソースのみが表示されます。

から：

http://localhost:8080/_MobileBrowserSimulator/index.html?webpage=http://localhost:8080/apps/services/preview/your-app-name/android/1.0/your-skin-name-here/your-html-filename-here.html&devicesFilePath=devices.json&platform=android&ips=169.254.236.125,9.148.205.249,10.0.0.2

に：

http://localhost:8080/apps/services/preview/your-app-name/android/1.0/your-skin-folder-name/your-html-filename-here.html

このプロセスは、将来のリリースでより合理化されることを願っています...

全画面表示にするかどうかは、Worklight ではなく、完全に開発者 (CSS など) の手に委ねられています。

jQuery Mobile を使用しているようです。以下をご覧ください。

于 2013-05-31T05:19:13.993 に答える
0
  1. Android タブレット向けに開発する場合は、AndroidManifest.xml (Android プロジェクト内) の要素でそれが宣言されていることを確認してください。デフォルトでは、normalScreens サポートのみが true に設定されています。
  2. CSS の調整が必要な場合があります。デフォルトでは、320px の固定幅と動的な高さがあり、これはスクリーンショットにあるものとほぼ同じです。
于 2013-05-31T06:21:40.740 に答える