Question

我目前正在使用phonegap + jquery mobile进行Windows Phone 7的一些开发

出于某种原因，最新Visual Studio Express中包含的Windows手机模拟器无法呈现简单的多页面应用。

enter image description here

任何人都有一些关于如何解决这个问题的指示？谢谢

下面是代码。它几乎取自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>

Answer 1

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

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

祝你好运！

Answer 2

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

Windows Phone 7 for无法呈现Phonegap Jquery Mobile Application

2 个答案: