This page is a demo of a bugfix for the iOS orientation change bug, in which the page zooms beyond the viewport on orientationchange when user scaling is enabled. Summary below.
When the meta viewport tag is set to content="width=device-width,initial-scale=1", or any value that allows user-scaling, changing the device to landscape orientation causes the page to scale larger than 1.0. As a result, a portion of the page is cropped off the right, and the user must double-tap (sometimes more than once) to get the page to zoom properly into view.
When switching to portrait mode, the layout adapts perfectly. The issue only occurs in landscape. If the content attribute is adjusted with either user-scalable=no or maximum-scale=1, the problem goes away, but then scaling is disabled, which is undesirable.
The page should remain scaled at 1.0, and the page width should shrink to fit the viewport.
The page is zoomed past 1.0, cropping a portion of the page from view and causing the content to be much too large.
Developers should not have to disable user-scaling to enable smooth changes in orientation.
Thanks!
Scott Jehl, Filament Group / jQuery Mobile Team
iOS-Orientationchange-Fix - JavaScript Library Archive