Question

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

Answer 1

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

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

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

所有移动设备均支持媒体选择器，但4.0版之前的iOS版本除外。幸运的是，这些是相对罕见的。

Answer 2

如link所述，只需在head标记中添加以下代码即可。

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

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

Answer 3

首先，不要在这里使用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>

你也应该受到警告。通过更改字体大小，您也可以更改标题大小，因此请将其考虑在内。

根据手机的显示形式更改文本大小

3 个答案: