0

我正在尝试使用 jQuery Mobile 在IBM Worklight平台上构建一个 PhoneGap/Cordova 应用程序，并且在生成的输出中有一些非常奇怪的行为。

我的应用程序的预览在 Eclipse 和桌面 Web 浏览器中显示正常，但是当我部署到设备时，似乎header和contentdiv 被挤压到屏幕顶部的一个非常小的空间中，如下所示

在此处输入图像描述

我真的不知道为什么会这样，我在Worklight 论坛上问过，但那里的回答都没有帮助，我想知道它是否是 jQuery Mobile 特有的问题？

重现步骤：

  1. 创建一个新项目
  2. 复制下面粘贴的代码enter.html
  3. 复制下面粘贴的代码home.html
  4. 调整 css/js 文件的位置
  5. 构建和部署应用程序
  6. 观察屏幕截图中显示的相同行为

我正在运行这些版本：

  • IBM Worklight 5.0.1-299-开发者版
  • jQuery 1.7.2 分钟
  • jQuery 移动 1.1.1
  • 日食 3.7.2
  • 设备：iPhone 4S、三星 Galaxy S2 和 Galaxy Ace，均运行 2.3.3

尝试使用“内容”的 id 的 body 元素和 jQuery div 元素之间是否存在冲突？

输入.html

<!DOCTYPE html>     
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
        <title>Enter</title>
        <link rel="shortcut icon" href="images/favicon.png" />
        <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

        <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
    </head>
    <body onload="WL.Client.init({})" id="content" style="display: none">

        <div data-role="page" id="enterPage">

            <div data-role="header">
                <h1>AppHeaderHere</h1>
            </div><!-- /header -->

            <div data-role="content">
                <h4 id="eventId">body here</h4>
                <p>

                <a href="home.html" data-role="button">Enter</a>

                Some filler text here, this would be the actual body content
                </p>
            </div><!-- /content -->

            <div data-role="footer" data-position="fixed">
                <h4>Footer here</h4>
            </div>

        </div><!-- /page -->

        <script src="js/MyApp.js"></script>
        <script src="js/messages.js"></script>
        <script src="js/auth.js"></script>
        <script src="js/jquery/jquery-1.7.2.min.js"></script>
        <script src="js/jquery/jquery.mobile-1.1.1.js"></script>
    </body>
</html>

主页.html

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Home</title> 
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />    
    </head> 
    <body onload="WL.Client.init({})"  id="content" style="display: none"> 

        <div data-role="page" id="homePage">

            <div data-role="header">
                <h1>Home</h1>
            </div><!-- /header -->

            <div data-role="content">
                <h4 id="eventId">Some header</h4>
                <p>
                Body content goes here
                </p>
            </div><!-- /content -->

            <div data-role="footer" data-id="foo1" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="home.html" class="ui-btn-active">Home</a></li>
                        <li><a href="page1.html">page1</a></li>
                        <li><a href="page2.html">page2</a></li>
                        <li><a href="page3.html">page3</a></li>
                        <li><a href="page4.html">page4</a></li>
                    </ul>
                </div>
            </div>

        </div><!-- /page -->

        <script src="js/MyApp.js"></script>
        <script src="js/messages.js"></script>
        <script src="js/auth.js"></script>
        <script src="js/jquery/jquery-1.7.2.min.js"></script>
        <script src="js/jquery/jquery.mobile-1.1.1.js"></script>
    </body>
</html>
4

1 回答 1

1

您正在使用的预览正在动态更改 HTML 正文的 CSS。那里有一个错误。

如果你使用 Firebug 或任何类似的工具，你会看到它为 body 提供了一个自动高度，它推翻了 jQuery Mobile CSS。只需注释掉内联 CSS 即可。

于 2012-08-05T06:46:25.867 回答