垂直放置於任何分辨率#Mobile網絡Aplication

股利試圖使移動網aplication垂直放置於任何分辨率#Mobile網絡Aplication

enter image description here

我需要使用CSS時，它具有最低的內容以適合白BG中的底部.. 。並且滾動將出現豐富的內容

2011-02-14 Chandu vkm

最簡單的方法是利用jQuery Mobile項目以及一些最佳實踐CSS的高度和一些額外的腳本。

這裏有一個基本的鍋爐板供您使用。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta content='yes' name='apple-mobile-web-app-capable'> 
    <meta content='default' name='apple-mobile-web-app-status-bar-style'> 
    <meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'> 
    <title>Example jQuery Mobile/Full-Height Content</title> 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script> 
    <script src='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js' type='text/javascript'></script> 

    <style> 
     @media screen and (orientation: landscape) { 
     html, body { 
      width: 100%; 
     } 

     .content h1.landscape { display: block } 
     .content h1.portrait { display: none } 
     } 
     @media screen and (orientation: portrait) { 
     html, body { 
      width: 100%; 
     } 

     .content .landscape { display: none } 
     .content .portrait { display: block } 
     } 
    </style> 
    <link href='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css' rel='stylesheet'> 
    </head> 
    <body> 
    <div data-role='page' data-theme='a'> 
     <div class='header' data-role='header'> 
     <h1>header</h1> 
     </div> 
     <div class='content' data-role='content'> 
     <h1 class="landscape">landscape!</h1> 
     <h1 class="portrait">portrait!</h1> 
     </div> 
     <div class='footer' data-role='footer'> 
     Nothing to see here. 
     </div> 
    </div> 
    <script> 
     (function() { 
     var fixgeometry = function() { 
      /* Some orientation changes leave the scroll position at something 
      * that isn't 0,0. This is annoying for user experience. */ 
      scroll(0, 0); 

      /* Calculate the geometry that our content area should take */ 
      var header = $(".header:visible"); 
      var footer = $(".footer:visible"); 
      var content = $(".content:visible"); 
      var viewport_height = $(window).height(); 

      var content_height = viewport_height - header.outerHeight() - footer.outerHeight(); 

      /* Trim margin/border/padding height */ 
      content_height -= (content.outerHeight() - content.height()); 
      content.height(content_height); 
     }; /* fixgeometry */ 

     $(document).ready(function() { 
      $(window).bind("orientationchange resize pageshow", fixgeometry); 
     }); 
     })(); 
    </script> 
    </body> 

</html>

希望這可以幫助你開始。

來源

2011-06-08 00:56:14

這對你有幫助嗎？ – 2011-06-08 21:53:05

垂直放置於任何分辨率#Mobile網絡Aplication

回答

相關問題