jQuery mobile landscape and portrait class

StackOverflow https://stackoverflow.com/questions/4253391

Question

I've started using the jquery mobile framework yet I cannot seem to use the landscape and portrait classes to minipulate styles.

documentation says

The HTML element will always have a class of either "portrait" or "landscape", depending on the orientation of the browser or device.

so I am under the impression that <h1>foo</h1> would either be <h1 class="landscape">foo</h1> or <h1 class="portrait">foo</h1>

yet h1.landscape { font-size:16px; } and h1.portrait { font-size:9px; } doesn't seem to work.

If anyone could shine some light on this it would be much appreciated.

Was it helpful?

Solution

ok. I decided to see whats going on and used curl to get the source code via android view.

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://www.actwebdesigns.co.uk');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Linux; U; Android 1.1; en-gb; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2');
$html = curl_exec($ch);

echo $html;

The only element that has the landscape or portrait class is the html tag.

<html xmlns="http://www.w3.org/1999/xhtml" class="ui-mobile landscape min-width-320px min-width-480px min-width-768px min-width-1024px"><head><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"></html>

I have also noticed that the framework does not auto switch the class on rotation so the following code which i've tested works.

<script type="text/javascript">
$(window).resize( function(){
    $('html').toggleClass('landscape, portrait');
});
</script>

scrap the above that has flaws.

<script type="text/javascript">
$(window).resize( function(){
    var height = $(window).height();
    var width = $(window).width(); 
    var ob = $('html');
    if( width > height ) {
        if( ob.hasClass('portrait') ) {
            ob.removeClass('portrait').addClass('landscape');
        }
    }else{
        if( ob.hasClass('landscape') ) {
            ob.removeClass('landscape').addClass('portrait');
        }
    }
});
</script>

using a liitle from Tommi Laukkanen's script the above works fine.

OTHER TIPS

Sorry but that is out of date! Since HTML5 you have in CSS3 MediaQueries. Now you can decide the style in CSS:

@media screen and (orientation: landscape) {

 h1 {
  color: red;
 }

 #someId {
   width: 50%;
 }

}

@media screen and (orientation: portrait) {

 h1 {
  color: blue
 }

 #someId {
   width: 100%;
 }

}

The portrait and landscape classes are added to the html element (not every element on the page), so you want the css selector to look for the landscape/portrait first. The following works:

html.landscape h1 { font-size:16px; }
html.portrait h1 { font-size:9px; }

put this in a lil plugin

(function($){
    $.fn.portlandSwitch = function ( options ) {
        // redefine styles to either landscape or portrait on phone switch
        $(window).resize( function(){
            var height = $(window).height();
            var width = $(window).width(); 
            var ob = $('html');
            if( width > height ) {
                if( ob.hasClass('portrait') ) {
                    ob.removeClass('portrait').addClass('landscape');
                }
            }else{
                if( ob.hasClass('landscape') ) {
                    ob.removeClass('landscape').addClass('portrait');
                }
            }
        });
    }
})(jQuery);



$.portlandSwitch();

Use this function:

//Detect change rotation
    function doOnOrientationChange()
    {
        switch(window.orientation)
        {
            case -90:
            case 90:
                alert('landscape');
                $('body').addClass('landscape');
                $('body').removeClass('portrait');
                break;
            default:
                alert('portrait');
                $('body').addClass('portrait');
                $('body').removeClass('landscape');
                break;

        }
    }

Here is a fully working version (based on Phil Jackson code) tested on different devices :)

I'm sure jQuery Mobile used to handle this, however I've another working version which is based on screen orientation, however I think this would be better due to it simplicity...

if($(window).width() > $(window).height()){
    if($('body').hasClass('portrait')){
        $('body').removeClass('portrait').addClass('landscape');
    } else if(!$('body').hasClass('portrait')) {
        $('body').addClass('landscape');
    }
}
else {
    if($('body').hasClass('landscape')){
        $('body').removeClass('landscape').addClass('portrait');
    } else if(!$('body').hasClass('landscape')) {
        $('body').addClass('portrait');
    }
}

This adds the portrait or landscape class, you don't need to hard-code that to your template file :)

Thanks

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top