title: jQuery Mobile - White space when switching orientation
body: <p>Having an issue with jQuery Mobile when using an iPhone. When I load the page first it loads fine but as soon as I switch orientation it adds white space to the bottom of the background image.</p>
  
  <p>In the orientation style-sheets I just have the code the background image. Doe anyone know how I can "fix" the height to <code>420px</code> for portrait and <code>320px</code> for landscape?</p>
  
  <p>Thanks.</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"&gt;&lt;head&gt;
  &lt;title&gt;Mobile Website&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  &lt;link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" media="all and (orientation:portrait)" href="css/portrait.css"&gt;
  &lt;link rel="stylesheet" media="all and (orientation:landscape)"href="css/landscape.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>