旋转手机时连续更改图标数

我开始了针对移动网页的开发。旋转手机时连续更改图标数

我需要一个具有6个大图标的应用程序，它将消耗几乎所有的可见空间。当移动横向放置时，我想让这些图标在2列中排成3行。当手机垂直放置时，我想让他们有2行和3列。我不能声明单个图标widht，例如100px，然后使用简单的float：left - 我希望我的loyout流畅。

我打算在我的页面中使用jQuery手机。

来源

2013-03-16 koral

你尝试过什么吗？ – Omar 2013-03-16 17:52:42

你的问题是什么？ – peterm 2013-03-16 23:32:30

我给你一个工作的例子，只是将它复制到一个空的html文件。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <style> 
     #custom-icon { 
      position: relative; 
      float: left; 
      width: 33.333%; 
      height: 50%; 
     } 

     .ui-content { 
      padding: 0 !important; 
     } 
    </style> 
    <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
    <script>  

     $(document).on('pageshow', '#index', function(){  
      detectOrientationMode(); 
      setRealContentHeight();    
     }); 

     $(window).bind('orientationchange', function() {    
      detectOrientationMode(); 
      setRealContentHeight();    
     });  

     function detectOrientationMode() { 
      if($(window).height() > $(window).width()) { 
       $('[data-role="content"] div').each(function(){ 
        $(this).css({'width':'50%','height':'33.33333%'});   
       }); 
      } else { 
       $('[data-role="content"] div').each(function(){ 
        $(this).css({'width':'33.33333%','height':'50%'});   
       });    
      } 
     } 

     function setRealContentHeight() { 
      var header = $.mobile.activePage.find("div[data-role='header']:visible"); 
      var footer = $.mobile.activePage.find("div[data-role='footer']:visible"); 
      var content = $.mobile.activePage.find("div[data-role='content']:visible:visible"); 
      var viewport_height = $(window).height(); 

      var content_height = viewport_height - header.outerHeight() - footer.outerHeight(); 
      if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) { 
       content_height -= (content.outerHeight() - content.height()); 
      } 
      $.mobile.activePage.find("div[data-role='content']").height(content_height); 
     } 
    </script> 
</head> 
<body> 
    <div data-role="page" id="index"> 
     <div data-theme="a" data-role="header"> 
      <h3> 
       First Page 
      </h3> 
     </div> 

     <div data-role="content"> 
      <div id="custom-icon" style="background: red;">Icon 1</div> 
      <div id="custom-icon" style="background: blue;">Icon 2</div> 
      <div id="custom-icon" style="background: green;">Icon 3</div> 
      <div id="custom-icon" style="background: yellow;">Icon 4</div> 
      <div id="custom-icon" style="background: orange;">Icon 5</div> 
      <div id="custom-icon" style="background: violet;">Icon 6</div> 
     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div> 
</body> 
</html>

测试上：

的Android 4.1.1浏览器

iPad等iOS 6.0

来源

2013-03-17 19:11:55 Gajotres

旋转手机时连续更改图标数

回答

相关问题