Skip to main content

Posts

Showing posts from November, 2011

jQuery Mobile Supported Platforms

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We're very proud of our commitment to universal accessibility through our broad support for all popular platforms.We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic). The visual fidelity of the experience is highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that's the nature of the web. A-grade - Full enhanced experience with Ajax-based animated page transitions.Apple iOS 3.2-5.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0)Android 2.1-2.3 - Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). …

Detecting and handle tab orientation changes with jQuery Mobile

Continue reading for example on using the orientationchange event.

Javascript
Outline:
1. get original orientation – window.orientation (return 0=portrait/1=landscape)
2. set style to use based original orientation
3. bind orientationchange event to the body element
4. when triggered call changeOrientation function sending over the event.orientation property
5. setOrientation function removes the current style class associated with the div and assign it a new one (portrait/landscape)
$(function(){

 // Set Inital orientation

// get the initial orientation from window which

// returns 0 for portrait and 1 for landscape

if(window.orientation == 0){

var ori = "portrait";

}else{

var ori = "landscape";

}

changeOrientation(ori);



// Orientation Change

// When orientation changes event is triggered

// exposing an orientation property of either

// landscape or portrait

$('body').bind('orientationchange',function(event){

changeOrientation(event.orientation)

})