[455] Am now setting the min-height of a page so that the address bar can always be hidden on a silent scroll. This helps our transitions feel smoother as the page does not jump down if the page is not taller then 100% of the window. On orientation change we also update this value.

This commit is contained in:
Jesse Streb 2011-01-26 21:08:42 -05:00
parent 378fb51225
commit d3077b491c
2 changed files with 14 additions and 0 deletions

View file

@ -105,6 +105,14 @@ $(document).bind("mobileinit.htmlclass", function(){
//add orientation class to HTML element on flip/resize.
if(event.orientation){
$html.removeClass( "portrait landscape" ).addClass( event.orientation );
//Set the min-height to the size of the fullscreen. This is to fix issue #455
if( event.orientation === 'portrait' ) {
$( '.ui-page' ).css( 'minHeight', ( screen.availHeight >= screen.availWidth ) ? screen.availHeight : screen.availWidth);
} else {
$( '.ui-page' ).css( 'minHeight', ( screen.availHeight <= screen.availWidth ) ? screen.availHeight : screen.availWidth);
}
$.mobile.silentScroll();
}
//add classes to HTML element for min/max breakpoints
detectResolutionBreakpoints();

View file

@ -37,6 +37,12 @@ $.widget( "mobile.page", $.mobile.widget, {
if ( this._trigger( "beforeCreate" ) === false ) {
return;
}
if( $( "html" ).hasClass( 'portrait' ) ) {
$elem.css( 'minHeight', ( screen.availHeight >= screen.availWidth ) ? screen.availHeight : screen.availWidth);
} else {
$elem.css( 'minHeight', ( screen.availHeight <= screen.availWidth ) ? screen.availHeight : screen.availWidth);
}
//some of the form elements currently rely on the presence of ui-page and ui-content
// classes so we'll handle page and content roles outside of the main role processing