How can I lock iPhone orientation in Mobile Safari?

August 21, 2008 11:51 AM

Is there a way to lock or hack an iPhone's orientation in mobile safari using CSS, HTML, Javascript or a combination there of?

I am building a website for Mobile Safari users (iPhone, iPod Touch). I want to be able to "lock" the users orientation so that the website doesn't change to a horizontal display when they tilt the hardware. My Google-Fu has failed me, does anyone know how to do this?

posted by wmeredith to Computers & Internet (7 answers total)

So... what would happen when the user visits the site in an already-horizontal position? You want to force them into a different position? Preventing them from using the much-easier horizontal keyboard layout?

I suspect this is impossible for a good reason.
posted by Tomorrowful at 11:57 AM on August 21, 2008

Simply put: No. The system does not look to the code of the website to determine orientation, it only uses the physical orientation of the device.

If you describe the effect you're trying to achieve, either here or via e-mail, I or another web developer may be able to help you work around this limitation.
posted by chudmonkey at 12:05 PM on August 21, 2008

Yes you can set orientation.

From: http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

The iPhone supports both landscape and portrait views. You can specify CSS based on viewport orientation which you determine via javascript and update the orient attribute of the body element. Target the browser with body[orient="landscape"] or body[orient="portrait"]

Best place for references is Apple's developer site:

http://developer.apple.com/webapps/
posted by wongcorgi at 12:19 PM on August 21, 2008

wongcorgi: That link seems to state that a developer can specify different CSS code to be applied depending on browser orientation, not that a developer can "fix" the orientation.
posted by chudmonkey at 12:24 PM on August 21, 2008

Except for the fact that if you can define CSS based on orientation, you could in fact do a work-around that does something like show only the following text "Application optimized for portrait view."

This is, however, pretty poor practice and if I came across something like that I'd probably choose not to use said application/site.
posted by genial at 12:36 PM on August 21, 2008

Just a little thought: Web developers have a responsibility to produce sites that are visually appealing while being functional, but these days no developer can be sure how their site will be seen. With script blockers, ad blockers and things like greasemonkey, it's highly possible for the user to determine how they'll interact with and view a site.

Obviously I don't understand your project's goals, but you shouldn't be afraid of designing your site to work best with one orientation. If users can see that the page looks better one way but still choose to view it the other way, then that's their issue. Of course, if there's a big gap between the aesthetic or the functionality between orientations, there'd better be a good reason for that. Sloppy design doesn't have many excuses. I'm not, of course, accusing you of sloppy design.
posted by chudmonkey at 1:06 PM on August 21, 2008

Not sloppy, just lazy. If there was a work around to "set" the devices orientation, I'd take it. (A better workaround than, "Site optimized for portrait orientation.")

Chudmonkey is right: Apple's developer site only states a way to query your server on an orientation event.

I guess I'll just go ahead and design for two orientations. I guess that's still better than designing for 4 or 5 different browsers ;-)

Thanks for all the answers guys.
posted by wmeredith at 12:52 PM on August 22, 2008