1

我正在 JQuery Mobile 中开发一个小应用程序。如果手机处于描绘模式，我希望标题的文本尺寸更小，如果是横向，则更大。最好的方法是什么？

4

3 回答 3

2

最好的方法是使用 CSS 媒体选择器：

@media screen and (orientation:portrait) {
    /* Portrait styles */
}

@media screen and (orientation:landscape) {
    /* Landscape styles */
}

除 4.0 之前的 iOS 版本外，所有移动设备都支持媒体选择器。幸运的是，这些都比较少见。

于 2013-03-19T13:31:49.677 回答
0

如此链接中所述，只需在 head 标签中添加以下代码即可完成。

<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">

您可能还想参考此链接以获得更多理解。

于 2013-03-19T13:33:20.543 回答
0

首先，不要在这里使用 css 媒体查询或 window.orientation。各种媒体设备具有不同的纵向/横向值。

您可以在这里找到更多信息：http: //www.matthewgifford.com/2011/12/22/a-misconception-about-window-orientation/

不幸的是，jsFiddle 无法检测到orientationchange 事件，所以经典的HTML 示例应该可以解决问题，只需直接复制/测试即可。

这应该以一种古老的残酷方式完成，使用 jQuery 来比较窗口高度和窗口宽度，如下所示：

<!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>
        .larger {
            font-size: 18px !important;
        }   

        .smaller {
            font-size: 12px !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();
        }); 

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

        function detectOrientationMode() {
            if($(window).height() > $(window).width()) {
                $.mobile.activePage.find('h3.ui-title').removeClass('smaller').addClass('larger');
            } else {
                $.mobile.activePage.find('h3.ui-title').removeClass('larger').addClass('smaller');
            }
        }
    </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>

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

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

你也应该被警告。通过更改字体大小，您也在更改标题大小，因此请考虑到这一点。

于 2013-03-19T13:42:10.403 回答