Question

我正在尝试更改方向上的网格数量是2到3个网格的格局我该如何实现？

Answer 1

首先，我们不能使用 window.orientation 来明确识别人像或风景方向，因为每个设备都会给出不同的结果。在此处阅读更多相关信息：http://www.matthewgifford.com/2011/12/22/a-misconception-about-window-orientation/

因此，要实现这一点，我们需要使用经典的方向检测功能。如果窗口高度比窗口宽度大，我们有纵向或在任何其他情况下我们都有横向方向。

我让你成为问题的一个有效例子。不幸的是，我无法创建一个jsFiddle示例，因为它不会检测 orientationchange 事件。要测试下面的代码，只需将其复制到一个空的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>
        .ui-block-a {
            background: red;
        }

        .ui-block-b {
            background: green;      
        }

        .ui-block-c {
            background: blue;       
        }
    </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('pagebeforeshow', '#index', function(){       
            detectOrientationMode();
        }); 

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

        function detectOrientationMode() {
            if($(window).height() > $(window).width()) {
                $('#custom-grid .ui-block-c').css('display','none');            
                $('#custom-grid').removeClass('ui-grid-b').addClass('ui-grid-a');
            } else {
                $('#custom-grid .ui-block-c').css('display','block');           
                $('#custom-grid').removeClass('ui-grid-a').addClass('ui-grid-b');
            }
        }
    </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 class="ui-grid-a" id="custom-grid">
                <div class="ui-block-a">Block A</div>
                <div class="ui-block-b">Block B</div>
                <div class="ui-block-c">Block C</div>
            </div><!-- /grid-b -->
        </div>

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

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

Answer 2

您可以根据需要显示三个网格和addClass（'hidden'）或removeClass（'hidden'），并将display：none指定给CSS中隐藏的类。

Answer 3

我有同样的问题，如果没有更好的建议，我只是找到了一个解决方法：

我只是使用jquery移动方向更改检测来在两个不同的div（数据角色页面）之间切换，以不同的布局复制我的内容。

在jQuery Mobile中更改方向更改的网格数

3 个答案: