WP2X We can help your Wordpress faster 
Have you ever become crazy with orientation change? If yes then you are in the same issue with me some days ago. But I figured out the solution so that I share you here to save your time and my time if I want to use it later. Let ‘s lock orientation to portrait layout in mobile web by js by this code.
1 2 3 4 5 6 7 8 | $(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
1 | 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
Wow, it ‘s really easy to save a huge works, thanks man. You save a lot of my time.
The UI look strange after I lock orientation like you do. I think the best way is still do the css capture for both of them.
how i put this in my wordpress site?