1

我使用 jquery mobile 1.3.2 在 Worklight 6.0 中创建了一个简单的应用程序。

这是一个带有页眉、内容和页脚的单页应用程序。包括必要的 jquery 移动 javascript 和 css 文件。

下面给出的是来自应用程序的 html 文件。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>DemoApp</title/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
        <link rel="shortcut icon" href="images/favicon.png"/>
        <link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
        <link rel="stylesheet" href="css/DemoApp.css"/>
        <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css"/>
        <script>window.$ = window.jQuery = WLJQ;</script>

    </head>
    <body id="content" style="display: none;">

        <div data-role="page">
            <div data-role="header"><h1>Header</h1></div>
            <div data-role="content">Content</div>
            <div data-role="footer" data-position="fixed"><h1>Footer</h1></div>
        </div>

        <script src="js/initOptions.js"></script>
        <script src="js/DemoApp.js"></script>
        <script src="js/messages.js"></script>
        <script src="js/jquery.mobile-1.3.2.min.js"></script>
    </body>
</html>

我已经创建了 Windows Phone 8 环境并构建了 worklight 项目。在 Microsoft Visual Studio Express 2012 for Windows Phone 的帮助下，该应用程序在 Windows Phone 模拟器中启动。

在此处输入图像描述

当我滚动屏幕时，我得到以下响应。

在此处输入图像描述 在此处输入图像描述

请提出解决此问题的方法。

4

2 回答 2

1

如果您想要的是固定的页眉/页脚，其中的内容介于可滚动之间，请尝试：

<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h3>Header</h3>
    </div>
    <div data-role="content">
       Content
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <h3>Footer</h3>
    </div>
</div>

点击切换设置是禁用在点击时隐藏页眉/页脚，但除非我禁用它，否则我无法让 JQM 固定页眉/页脚运行。

我还在 Windows Phone 8 上发现，页脚将自身定位得太高。所以我必须在 CSS 中添加以下内容：

@media screen and (orientation: portrait) {
 @-ms-viewport {
    width: 320px;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
 }
}
于 2013-09-26T14:21:56.277 回答
0

您能否向我们展示您正在使用 DemoApp.css 的应用程序 CSS。尝试禁用其中的默认 css 并再次运行。

问题似乎是 css 被告知屏幕尺寸大于实际设备尺寸。

问候， 猫王

于 2013-09-26T12:35:45.340 回答