[webkit-dev] iPhone Orientation and Scaling

[Christopher Allen]

In the www.iPhoneWebDev.com community we've been puzzling through how
to identify the change that happens when the iPhone's physical
orientation changes from portrait to landscape and back, and also how
to control the viewport scaling.

We need this in order to create good iPhone webapp UI that works in
both portrait and landscape mode.

The first thing we discovered is that in iPhone Safari, the
window.onresize event handler that should be triggered on all
orientation changes between portrait and landscape, does not work
properly. Typically, for the first orientation change, and often the
first two orientation changes, the event is not triggered, but then is
triggered for every subsequent orientation change through the
window.onresize event. This bug has been reported in Apple RADAR
problem ID: 5306129.

So our next attempt was use window.innerWidth, which worked somewhat,
until the document was reflowed and scaled and then the
window.innerWidth remained constant no matter what the orientation.

We next tried to tackle scaling issues caused by orientation changes,
but are stymied as we can't seem to find that setting in the DOM. We
can set the meta viewport scaling properties such as minimum-scale,
maximum-scale, initial-scale, user-scalable dynamically, but those
seem to be used more for initial display of the page.

There is a lot of discussion on this in this thread:
http://groups.google.com/group/iphonewebdev/browse_thread/thread/f43493a828dffdb3

My guess is that all of these problems are in layers that are not
webkits responsibility, but possibly someone here might know the
answers, or know how they should work to follow an existing DOM
standard. Is there a scaling property in DOM someplace? Is there
another way we can detect orientation change until the window.onresize
bug is fixed?

Thanks for your help!

-- Christopher Alleln