0

我开始为移动设备上的网页开发。

我需要一个带有 6 个大图标的应用程序，它会占用几乎所有可见空间。当移动设备水平放置时，我希望这些图标在 2 列中有 3 行。当手机垂直放置时，我希望它们有 2 行和 3 列。我不能将单个图标宽度声明为例如 100px，然后使用简单的 float:left - 我希望我的布局是流畅的。

我计划在我的页面中使用 jQuery mobile。

4

1 回答 1

0

我为您做了一个工作示例，只需将其复制到一个空的 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>

测试：

安卓 4.1.1 铬

iPad iOS 6.0

于 2013-03-17T19:11:55.790 回答