jQuery mobile landscape and portrait class
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.
Answer
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.