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

まず第一に、ここでは 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 に答える
0

このリンクに記載されているように、head タグに以下のコードを追加するだけで実行できます。

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

さらに理解を深めるために、このリンクを参照することもできます。

于 2013-03-19T13:33:20.543 に答える