Geek Answers Handbook

JQuery mobile landscape and portrait class

I started using the jquery mobile platform, but I cannot use landscape and portrait classes for mini-styles.

documentation says

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

so it seems to me that <h1>foo</h1> will be either <h1 class="landscape">foo</h1> , or <h1 class="portrait">foo</h1>

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

If anyone could shed light on this, he would greatly appreciate it.

+4
source share
6 answers

OK. I decided to see what was happening and used curl to get the source code through the 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 a 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 also noticed that the framework does not automatically switch the class to rotation, so the following code works, which I tested.

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

discard 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 liitle from Tommi Laukkanen script, this works great.

+5
source

Sorry, but this is out of date! Since HTML5 you have it in CSS3 MediaQueries. Now you can choose a 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%; } }
+5
source

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 landscape / portrait first. The following works:

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

put this in 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();
0
source

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; } }
0
source

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

I'm sure jQuery Mobile used to do this, however I have a different working version based on the screen orientation, however I think it would be better due to 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 a portrait or landscape class, you do not need to hardcode it to the template file :)

thanks

0
source

More articles:


All Articles