Test page for ios-orientationchange-fix.js

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.

Summary of bug

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.

Steps to Reproduce:

  1. Open this page in portrait orientation on an iOS device or emulator.
  2. Change to landscape orientation

Expected Results:

The page should remain scaled at 1.0, and the page width should shrink to fit the viewport.

Actual Results (without included fix):

The page is zoomed past 1.0, cropping a portion of the page from view and causing the content to be much too large.

Notes:

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