Windows Phone 7 无法呈现 Phonegap Jquery 移动应用程序答案

【问题标题】：Windows Phone 7 for could not render Phonegap Jquery Mobile ApplicationWindows Phone 7 无法呈现 Phonegap Jquery 移动应用程序
【发布时间】：2012-03-04 05:58:49
【问题描述】：

我目前正在使用 phonegap+jquery mobile 为 Windows Phone 7 做一些开发

由于某种原因，最新的 Visual Studio express 中包含的 Windows phone 模拟器无法呈现简单的多页应用程序。

有人对如何解决这个问题有一些指示吗？谢谢你

下面是代码。它几乎取自 jquery 移动文档。

<!DOCTYPE html>
<html>

  <head>
    <!--
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0, user-scalable=no;" />
          -->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <meta http-equiv="Content-type" 
          content="text/html; charset=utf-8"/>

    <title>JQ Tester</title>

    <link rel="stylesheet" type="text/css" href="js/jquery/jquery.mobile-1.0.1.min.css" />
    <script type="text/javascript" src="js/jquery/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="js/custom-scripting.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.mobile-1.0.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>

  </head>

  <body>

    <!-- Start of first page: #one -->
    <div data-role="page" id="one" data-title="Page One">

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

      <div data-role="content" >
        <h2>One</h2>

        <p>I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>

        <p>
          This is a multi-page <a href="page-template.html"> single page template</a> that has just one page within it.
        </p>
        <p>Just view the source and copy the code. Remember to include a meta viewport tag in the head to set the zoom level.</p>
        <p>
          You link to internal For example, to <a href="#two" >link</a> have a <code>href="#two"</code> in the code.
        </p>

        <h3>Show internal pages:</h3>
        <p>
          <a href="#two" data-role="button">Show page "two"</a>
        </p>
        <p>
          <a href="#popup" data-role="button" data-rel="dialog">Show page "popup" (as a dialog)</a>
        </p>
      </div>
      <!-- /content -->

      <div data-role="footer" data-theme="d">
        <h4>Page Footer</h4>
      </div>
      <!-- /footer -->
    </div>
    <!-- /page one -->


    <!-- Start of second page: #two -->
    <div data-role="page" id="two" data-theme="a" data-title="Page Two">>

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

      <div data-role="content" data-theme="a">
        <h2>Two</h2>
        <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
        <p>
          Notice that the theme is different few <code>data-theme</code> swatch assigments here to show off how flexible it is. 
        </p>
        <p>
          <a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a>
        </p>

      </div>
      <!-- /content -->

      <div data-role="footer">
        <h4>Page Footer</h4>
      </div>
      <!-- /footer -->
    </div>
    <!-- /page two -->

    <!-- Start of third page: #popup -->
    <div data-role="page" id="popup">

      <div data-role="header" data-theme="e">
        <h1>Dialog</h1>
      </div>
      <!-- /header -->

      <div data-role="content" data-theme="d">
        <h2>Popup</h2>
        <p>
          I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.
        </p>
        <p>
          <a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a>
        </p>
      </div>
      <!-- /content -->

      <div data-role="footer">
        <h4>Page Footer</h4>
      </div>
      <!-- /footer -->
    </div>
    <!-- /page popup -->

  </body>
</html>

【问题讨论】：

我也有同样的问题。请帮帮我。
对于这个问题，我放弃了，改用真机测试。

标签： jquery-mobile cordova windows-phone-7

【解决方案1】：

视口是这里的问题，在所有平台和设备上都不相同，对于 Windows Phone 7，您可以尝试将此代码添加到 head 标签中

<!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->

祝你好运！

【讨论】：

【解决方案2】：

我将您的代码复制到了一个新的 Phonegap 1.4.1 项目中，它适用于 jQuery 1.6.4 和 1.7.1。我建议尝试不同版本的 jQuery 和/或重新安装项目的任何依赖项，例如 Windows Phone SDK 和 Phonegap 模板。

【讨论】：