How do I lock the orientation to portrait mode in a iPhone Web Application?

You can specify CSS styles based on viewport orientation: Target the browser with bodyorient="landscape" or bodyorient="portrait".

You can specify CSS styles based on viewport orientation: Target the browser with bodyorient="landscape" or bodyorient="portrait" evotech.net/blog/2007/07/web-development... However... Apple's approach to this issue is to allow the developer to change the CSS based on the orientation change but not to prevent re-orientation completely. I found a similar question elsewhere: ask.metafilter.com/99784/How-can-I-lock-....

Thanks but, I'm doing that part already, what I really want is to prevent Mobile Safari to not switch orientation on me when the user tilts the phone. – Kevin Jul 30 '09 at 14:44 1 Apple's approach to this issue to to allow the developer to change the CSS based on the orientation change but not to prevent re-orientation completely. I found a similar question elsewhere: ask.metafilter.Com/99784/… – Scott Fox Jul 30 '09 at 15:00 Scott - if you copy your latest comment into the answer, I'll mark it as the accepted answer and give you the karma points :) – Kevin Jul 30 '09 at 16:04 Thanks Kevin!

I appreciate it. – Scott Fox Jul 30 '09 at 20:03.

This is a pretty hacky solution, but it's at least something(?). The idea is to use a CSS transform to rotate the contents of your page to quasi-portrait mode. Here's JavaScript (expressed in jQuery) code to get you started: $(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!

Thanks for the hack. – netrom May 24 at 16:37 1 Grumdrig, you are my hero! This is the most useful and working iPhone web-app related tip I've ever seen on this site.

Thanks A LOT! – noober Oct 30 at 23:25 Before I read this response, I was about to suggest on the "accepted" answer comments that somebody ELSE should try this and tell me if it worked. I'm really glad somebody already did, and that it did!

– Lane Nov 4 at 19:47.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.