2012-02-12 76 views
1

我目前做的Windows Phone 7的一些開發中使用的PhoneGap + jQuery Mobile的的Windows Phone 7不能渲染PhoneGap的jQuery Mobile的應用

出於某種原因,包含在最新的Visual Studio速成的Windows Phone模擬器不能渲染簡單的多頁應用程序。

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> 
+0

我也有同樣的問題。請幫幫我。 – 2013-03-05 12:23:18

+0

對於這個問題,我放棄了用真正的手機來代替測試。 – Aditya 2013-06-12 05:35:56

回答

0

視口是這裏的問題,是不是所有的plataforms和設備一樣,爲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]--> 

祝您好運!

0

我將你的代碼複製到一個新的Phonegap 1.4.1項目中,它可以同時使用jQuery 1.6.4和1.7.1。我建議嘗試不同版本的jQuery和/或重新安裝項目的任何依賴項,例如Windows Phone SDK和Phonegap模板。

相關問題