Question

我在common文件夹下开发了我的用户界面，然后为平板电脑创建了一个皮肤，并将其命名为android.tablet。但是当我在平板电脑模拟器上运行它时，它看起来像这样：

enter image description here

我在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;
}

为什么它不能全屏？我缺的任何代码？

Answer 1

您确定read the Worklight Skins training module吗？

Worklight Skins的基本前提是：

创建一个新的Worklight项目，应用程序
添加皮肤支持的环境（Android，BlackBerry 6/7/10，iPhone，iPad）
为简单起见，请将skinLoader.js更新为指向皮肤的文件夹（例如“android.skin”）
在皮肤的相应文件夹中创建CSS和JS文件
将HTML文件从common文件复制到skin文件夹
在皮肤文件夹中的CSS，JS和HTML中执行任何操作，例如更改颜色和添加alart
构建所有＆amp;部署
确认显示颜色和警告，确保它是皮肤而不是已加载的默认值。

预览皮肤的网络资源：

右键单击android环境文件夹
选择运行方式＆gt;＆gt;预览...
从“皮肤”下拉列表中选择皮肤
单击“运行”按钮

您现在应该看到皮肤（预览只显示网络资源，而不是原生部分，如果有的话）。

如果失败，您可以尝试更改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，看看这些：

Answer 2

如果您想为Android平板电脑开发，请确保AndroidManifest.xml（Android项目内部）中的元素声明了这一点。默认情况下，只有normalScreens支持设置为true。
您可能需要调整CSS。默认情况下，它具有320px的固定宽度和动态高度，这与屏幕截图相同。

如何使用Worklight开发平板电脑？

2 个答案: