CODEWITHSUNDEEP
jquerycssjquery-mobile
Anto
Anto

Reputation: 4305

Changing size of text based on the display modality of the phone

I am developing a little application in JQuery Mobile. I would like to have the text of the header to be smaller in size if the mobile is in portrayed mode, larger if it is in landscape. What's the best approach?

Upvotes: 1

Views: 81

Answers (3)

Gajotres
Gajotres

Reputation: 57309

First off all, don't use css media queries here or window.orientation. Various media devices have different portrait / landscape values.

You can find more about it here: http://www.matthewgifford.com/2011/12/22/a-misconception-about-window-orientation/

Unfortunately jsFiddle can't detect orientationchange event so classic HTML example should do a trick, just copy/test it directly.

This should be done in an old brutal way, using jQuery to compare window height and window width like this:

<!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>

You should be also warned. Through changing font size you are also changing header size, so take that into a consideration.

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41842

As stated in this link, it can be done by just adding the below code in head tag.

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

You may also want to refer this link for more understanding.

Upvotes: 0

nicbou
nicbou

Reputation: 1056

The best way would be to use CSS media selectors:

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

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

Media selectors are supported on all mobile devices except iOS versions older than 4.0. Fortunately, these are relatively rare.

Upvotes: 2

Related Questions