IBM Worklight 6.0 应用程序 - 带有 jQuery Mobile 的 Windows Phone 8 中的页面呈现问题
Posted
技术标签:
【中文标题】IBM Worklight 6.0 应用程序 - 带有 jQuery Mobile 的 Windows Phone 8 中的页面呈现问题【英文标题】：IBM Worklight 6.0 Application - Page rendering issue in Windows Phone 8 with jQuery Mobile 【发布时间】：2013-09-26 09:29:25 【问题描述】：我在 Worklight 6.0 中使用 jquery mobile 1.3.2 创建了一个简单的应用程序。
这是一个带有页眉、内容和页脚的单页应用程序。包括必要的 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 模拟器中启动。
当我滚动屏幕时，我得到以下响应。
请提出解决此问题的方法。
【问题讨论】：
【参考方案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>
tap-toggle 设置是禁用在点击时隐藏页眉/页脚，但除非我禁用它，否则我无法让 JQM 固定页眉/页脚正常工作。
我还发现在 Windows Phone 8 上，页脚会将自身定位得太高。所以我必须在 CSS 中添加以下内容：
@media screen and (orientation: portrait)
@-ms-viewport
width: 320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
【讨论】：
我无法重现您所看到的内容。我已经把你的 HTML 放到了一个新的 WL V6 应用程序中。我修改它以使用非缩小的 jquery mobile 和 css（应该没关系）添加了点击切换属性，在内容中添加了一些文本以便滚动，并添加了上面的 CSS 修复来移动页脚向下。结果是页眉滚动，页脚保持不变，并且应用程序没有切换到半角，如上所示。我正在使用 WL Studio 6.0.0.2013917-1749 和 Visual Studio Express 11.0.60610.01 Update 3【参考方案2】：您能否向我们展示您正在使用 DemoApp.css 的应用 CSS。尝试禁用其中的默认 css 并再次运行。
问题似乎是 css 被告知屏幕尺寸大于实际设备尺寸。
问候， 猫王
【讨论】：
DemoApp.css a、abbr、address、article、aside、audio、b、blockquote、body、canvas、caption、cite、code、dd、del、details、dfn、dialog、div、dl , dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark , menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var ，视频边距：0；填充：0； #content 高度：460px;边距：0 自动；宽度：320px；我尝试删除所有默认 css，但我仍然遇到同样的问题。以上是关于IBM Worklight 6.0 应用程序 - 带有 jQuery Mobile 的 Windows Phone 8 中的页面呈现问题的主要内容，如果未能解决你的问题，请参考以下文章
IBM Worklight 6.0 - 在以下期间发生内部错误：Worklight 应用程序构建器
IBM Worklight 6.0 - Worklight Starter Dojo 示例损坏？