Added viewport meta elements to the markup of every template and removed the metaViewportContent option from code and docs. IE does not support generated viewport tags.

js/jquery.mobile.core.js

@@ -8,6 +8,7 @@
  */
 
 (function( $, window, undefined ) {
+
 	//jQuery.mobile configurable options
 	$.extend( $.mobile, {
 
@@ -47,9 +48,6 @@
 		//if false, message will not appear, but loading classes will still be toggled on html el
 		loadingMessage: "loading",
 
-		//configure meta viewport tag's content attr:
-		metaViewportContent: "width=device-width, minimum-scale=1, maximum-scale=1",
-
 		//support conditions that must be met in order to proceed
 		gradeA: function(){
 			
@@ -98,8 +96,64 @@
 			TAB: 9,
 			UP: 38,
 			WINDOWS: 91 // COMMAND
+		}
+	});
+
+
+	//trigger mobileinit event - useful hook for configuring $.mobile settings before they're used
+	$( window.document ).trigger( "mobileinit" );
+
+
+	//support conditions
+	//if device support condition(s) aren't met, leave things as they are -> a basic, usable experience,
+	//otherwise, proceed with the enhancements
+	if ( !$.mobile.gradeA() ) {
+		return;
+	}
+
+
+	//define vars for interal use
+	var $window = $(window),
+		$html = $( "html" ),
+		$head = $( "head" ),
+
+		//loading div which appears during Ajax requests
+		//will not appear if $.mobile.loadingMessage is false
+		$loader = $.mobile.loadingMessage ?
+			$( "<div class='ui-loader ui-body-a ui-corner-all'>" +
+						"<span class='ui-icon ui-icon-loading spin'></span>" +
+						"<h1>" + $.mobile.loadingMessage + "</h1>" +
+					"</div>" )
+			: undefined;
+
+	//add mobile, initial load "rendering" classes to docEl
+	$html.addClass( "ui-mobile ui-mobile-rendering" );
+
+	//expose some core utilities
+	$.extend($.mobile, {
+
+		// turn on/off page loading message.
+		pageLoading: function ( done ) {
+			if ( done ) {
+				$html.removeClass( "ui-loading" );
+			} else {
+				if( $.mobile.loadingMessage ){
+					var activeBtn =$( "." + $.mobile.activeBtnClass ).first();
+
+					$loader
+						.appendTo( $.mobile.pageContainer )
+						//position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
+						.css( {
+							top: $.support.scrollTop && $(window).scrollTop() + $(window).height() / 2 ||
+							activeBtn.length && activeBtn.offset().top || 100
+						} );
+				}
+
+				$html.addClass( "ui-loading" );
+			}
 		},
 
+		//scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
 		silentScroll: function( ypos ) {
 			ypos = ypos || 0;
 			// prevent scrollstart and scrollstop events
@@ -113,6 +167,42 @@
 			setTimeout(function() {
 				$.event.special.scrollstart.enabled = true;
 			}, 150 );
+		},
+
+		// find and enhance the pages in the dom and transition to the first page.
+		initializePage: function(){
+			//find present pages
+			var $pages = $( "[data-role='page']" );
+
+			//add dialogs, set data-url attrs
+			$pages.add( "[data-role='dialog']" ).each(function(){
+				$(this).attr( "data-url", $(this).attr( "id" ));
+			});
+
+			//define first page in dom case one backs out to the directory root (not always the first page visited, but defined as fallback)
+			$.mobile.firstPage = $pages.first();
+
+			//define page container
+			$.mobile.pageContainer = $pages.first().parent().addClass( "ui-mobile-viewport" );
+
+			//cue page loading message
+			$.mobile.pageLoading();
+
+			// if hashchange listening is disabled or there's no hash deeplink, change to the first page in the DOM
+			if( !$.mobile.hashListeningEnabled || !$.mobile.path.stripHash( location.hash ) ){
+				$.mobile.changePage( $.mobile.firstPage, false, true, false, true );
+			}
+			// otherwise, trigger a hashchange to load a deeplink
+			else {
+				$window.trigger( "hashchange", [ true ] );
+			}
 		}
 	});
+
+	//dom-ready inits
+	$($.mobile.initializePage);
+
+	//window load event
+	//hide iOS browser chrome on load
+	$window.load( $.mobile.silentScroll );
 })( jQuery, this );