$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});

The code expects the entire contents of your page to live inside a div just inside the body element. It rotates that div 90 degrees in landscape mode – back to portrait.

Left as an exercise to the reader: the div rotates around its centerpoint, so its position will probably need to be adjusted unless it’s perfectly square.

Also, there’s an unappealing visual problem. When you change orientation, Safari rotates slowly, then the top-level div snaps to 90degrees different. For even more fun, add

body > div { -webkit-transition: all 1s ease-in-out; }

to your CSS. When the device rotates, then Safari does, then the content of your page does. Beguiling!

Reference: stackoverflow.com

The post Lock orientation to portrait layout in mobile web by js appeared first on WP2X.

But if we resize the windows, the popup display well again, that ‘s why I show you here to get the solution to make the popup show beautiful even though user don’t resize the windows. Here is the tips:

$("#your-popup").trigger('updatelayout');

And to make sure you call this line

$(document).resize();

Then everything should work well again :).

The post jQuery Mobile update popup layout after content change appeared first on WP2X.