1

我已经在common文件夹下开发了我的 UI，然后我为我的平板电脑创建了一个皮肤并将其命名为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 Skins 的基本前提是：

  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. 验证颜色和警报是否显示，确保加载的是皮肤而不是默认值。

预览皮肤的网络资源：

  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

这个过程有望在未来的版本中得到更加简化......

至于是否全屏，这完全由开发人员（您的 CSS 等）掌握，而不是 Worklight 的。

我看到你正在使用 jQuery Mobile，看看这些：

于 2013-05-31T05:19:13.993 回答
0
  1. 如果您想为 Android 平板电脑开发，请确保 AndroidManifest.xml（Android 项目内部）中的元素声明了这一点。默认情况下，只有 normalScreens 支持设置为 true。
  2. 您可能需要调整 CSS。默认情况下，它具有 320 像素的固定宽度和动态高度，这几乎就是您在屏幕截图上所拥有的。
于 2013-05-31T06:21:40.740 回答