title: Windows Phone 7 for could not render Phonegap Jquery Mobile Application
body: <p>I am currently doing some development for Windows Phone 7 using phonegap+jquery mobile</p>
  
  <p>For some reason, Windows phone emulator included in the latest Visual Studio express could not render simple multipage app.</p>
  
  <p><img src="https://i.stack.imgur.com/Qp2jQ.png" alt="enter image description here"></p>
  
  <p>Anyone have some pointers on how to solve this? Thank you </p>
  
  <p>below is the code. It is pretty much taken from jquery mobile documentation.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;!--
      &lt;meta name="viewport" 
            content="width=device-width, initial-scale=1.0, user-scalable=no;" /&gt;
            --&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/&gt;
      &lt;meta http-equiv="Content-type" 
            content="text/html; charset=utf-8"/&gt;
  
      &lt;title&gt;JQ Tester&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="js/jquery/jquery.mobile-1.0.1.min.css" /&gt;
      &lt;script type="text/javascript" src="js/jquery/jquery-1.6.4.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/custom-scripting.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery/jquery.mobile-1.0.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;!-- Start of first page: #one --&gt;
      &lt;div data-role="page" id="one" data-title="Page One"&gt;
  
        &lt;div data-role="header"&gt;
          &lt;h1&gt;Multi-page&lt;/h1&gt;
        &lt;/div&gt;
        &lt;!-- /header --&gt;
  
        &lt;div data-role="content" &gt;
          &lt;h2&gt;One&lt;/h2&gt;
  
          &lt;p&gt;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.&lt;/p&gt;
  
          &lt;p&gt;
            This is a multi-page &lt;a href="page-template.html"&gt; single page template&lt;/a&gt; that has just one page within it.
          &lt;/p&gt;
          &lt;p&gt;Just view the source and copy the code. Remember to include a meta viewport tag in the head to set the zoom level.&lt;/p&gt;
          &lt;p&gt;
            You link to internal For example, to &lt;a href="#two" &gt;link&lt;/a&gt; have a &lt;code&gt;href="#two"&lt;/code&gt; in the code.
          &lt;/p&gt;
  
          &lt;h3&gt;Show internal pages:&lt;/h3&gt;
          &lt;p&gt;
            &lt;a href="#two" data-role="button"&gt;Show page "two"&lt;/a&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;a href="#popup" data-role="button" data-rel="dialog"&gt;Show page "popup" (as a dialog)&lt;/a&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;!-- /content --&gt;
  
        &lt;div data-role="footer" data-theme="d"&gt;
          &lt;h4&gt;Page Footer&lt;/h4&gt;
        &lt;/div&gt;
        &lt;!-- /footer --&gt;
      &lt;/div&gt;
      &lt;!-- /page one --&gt;
  
  
      &lt;!-- Start of second page: #two --&gt;
      &lt;div data-role="page" id="two" data-theme="a" data-title="Page Two"&gt;&gt;
  
        &lt;div data-role="header"&gt;
          &lt;h1&gt;Two&lt;/h1&gt;
        &lt;/div&gt;
        &lt;!-- /header --&gt;
  
        &lt;div data-role="content" data-theme="a"&gt;
          &lt;h2&gt;Two&lt;/h2&gt;
          &lt;p&gt;I have an id of "two" on my page container. I'm the second page container in this multi-page template.&lt;/p&gt;
          &lt;p&gt;
            Notice that the theme is different few &lt;code&gt;data-theme&lt;/code&gt; swatch assigments here to show off how flexible it is. 
          &lt;/p&gt;
          &lt;p&gt;
            &lt;a href="#one" data-direction="reverse" data-role="button" data-theme="b"&gt;Back to page "one"&lt;/a&gt;
          &lt;/p&gt;
  
        &lt;/div&gt;
        &lt;!-- /content --&gt;
  
        &lt;div data-role="footer"&gt;
          &lt;h4&gt;Page Footer&lt;/h4&gt;
        &lt;/div&gt;
        &lt;!-- /footer --&gt;
      &lt;/div&gt;
      &lt;!-- /page two --&gt;
  
      &lt;!-- Start of third page: #popup --&gt;
      &lt;div data-role="page" id="popup"&gt;
  
        &lt;div data-role="header" data-theme="e"&gt;
          &lt;h1&gt;Dialog&lt;/h1&gt;
        &lt;/div&gt;
        &lt;!-- /header --&gt;
  
        &lt;div data-role="content" data-theme="d"&gt;
          &lt;h2&gt;Popup&lt;/h2&gt;
          &lt;p&gt;
            I have an id of "popup" on my page container and only look like a dialog because the link to me had a &lt;code&gt;data-rel="dialog"&lt;/code&gt; attribute which gives me this inset look and a &lt;code&gt;data-transition="pop"&lt;/code&gt; attribute to change the transition to pop. Without this, I'd be styled as a normal page.
          &lt;/p&gt;
          &lt;p&gt;
            &lt;a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back"&gt;Back to page "one"&lt;/a&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;!-- /content --&gt;
  
        &lt;div data-role="footer"&gt;
          &lt;h4&gt;Page Footer&lt;/h4&gt;
        &lt;/div&gt;
        &lt;!-- /footer --&gt;
      &lt;/div&gt;
      &lt;!-- /page popup --&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>