footer and header of iPad 3 doesn't fit correctly

footer and header of iPad 3 doesn't fit correctly

Hi guys ,
I've been developing an application and whenever i'm testing on the iPad to check the size i have the header on the status bar and there is a white area under the footer i don't know from where ! please help


and this is the code of my page
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  5. <meta name="apple-mobile-web-app-capable" content="yes" />
  6. <title>jQuery Mobile Web App</title>
  7. <link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
  8. <link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css"/>
  9. <link href="jquery-mobile/jquery.mobile.theme-1.3.2.min.css" rel="stylesheet" type="text/css"/>

  11. <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
  12. <script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
  13. <script type="text/javascript">
  14. document.addEventListener('touchmove', function(event) {
  15.      event.preventDefault();
  16. }, false);
  17. </script>

  19. <script>
  20. function stretch_portal_content() {
  21.             if ($(window).height() > $('body').innerHeight())
  22.             {
  23.                 $('#portal-content').height(
  24.        $(window).height() - (
  25.            $('body').innerHeight() - $('#portal-content').outerHeight(true)
  26.        )
  27.        );
  28.             }
  29. }
  30. </script>
  31. </head> 
  32. <body> 

  34. <div data-role="page" id="page">
  35. <div data-role="header" data-theme="b" data-position="fixed" >
  36. <h1>My Page</h1>
  37. </div>
  38. <div data-role="content"> </div>
  39. <div data-role="footer" data-theme="b" data-position="fixed" >
  40. <h4>Page Footer</h4>
  41. </div>
  42. </div>






  49. </div>

  51. </body>
  52. </html>
and i change the CSS file for iPad 3
i changed this line 
  2. @media only screen 
  3. and (min-device-width : 768px) 
  4. and (max-device-width : 1024px) 
  5. and (orientation : landscape)
  6. and (-webkit-min-device-pixel-ratio: 2) 
  7. {


please Help !!!