YUSAH Group

In JQuery mobile, you need to use the pageinit, because the ready function is only called once; every other page is loaded via Ajax, which won't trigger a ready event.

My jQuery for the implementation looks for images with class="replace-2x", and replaces the standard image with one at the same path with @2x added to the file name.

Problem: after changing my "create view model for page" from sync to async behavior, I have the problem that jquery-mobile fires its events before the data is ready.

The only solution I've been able to come up with is to write a custom transition handler that defers starting the transition until the Ajax request completes.

I added viewport tag to specify the viewport width to 1024px so it leaves some margin space on the left and right sides.

You can simply fix this by setting the viewport width to 720px. The width of your design doesn't change, but iPhone will scale it to fit in 720px.

Common Mistake A common mistake is that people often apply initial-scale=1 on non-responsive design. This will make the page render at 100% without scaling.

window.onorientationchange = function() {  /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the    left, or landscape mode with the screen turned to the right. */  var orientation = window.orientation;  switch(orientation) {    case 0:        /* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration           in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */        document.body.setAttribute("class","portrait");                /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events"  */        document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";        break;              case 90:        /* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the           body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */        document.body.setAttribute("class","landscapeLeft");                document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";        break;        case -90:          /* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the            body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */        document.body.setAttribute("class","landscapeRight");                document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";        break;  }}