resize and orientationchange now auto-add maxwidth classes to HTML element for common width breakpoints (defaults: 320,480,768,1024), which can be used in css targeting in place of media queries (for shorthand, and more importantly, to support IE, which may be opted-in to A support).

This commit is contained in:
scottjehl 2010-10-22 13:57:50 -04:00
parent d55fce4a47
commit 732b66057a

View file

@ -391,13 +391,34 @@
});
});
//add mobile, loading classes to doc
$html.addClass('ui-mobile');
//add orientation class on flip/resize.
$window.bind( "orientationchange", function( event, data ) {
$html.removeClass( "portrait landscape" ).addClass( data.orientation );
});
//add mobile, loading classes to doc
$html.addClass('ui-mobile');
//add breakpoint classes for faux media-q support
function resolutionBreakpoints(){
var currWidth = $window.width(),
classPrefix = "maxwidth-",
breakPoint;
$html.removeClass( classPrefix + $.mobile.resolutionBreakpoints.join(" " + classPrefix) );
$.each($.mobile.resolutionBreakpoints,function( i ){
if( currWidth >= $.mobile.resolutionBreakpoints[ i ] ){
breakPoint = $.mobile.resolutionBreakpoints[ i ];
}
});
$html.addClass(classPrefix+breakPoint);
};
//common breakpoints, overrideable, changeable
$.mobile.resolutionBreakpoints = [320,480,768,1024];
$window.bind( "orientationchange resize", resolutionBreakpoints);
resolutionBreakpoints();
//insert mobile meta - these will need to be configurable somehow.
var headPrepends =