UISplitViewController breaks media queries. Workarounds?

Question

It seems that a UIWebView included in a view controller that is in a split view controller, the web view reports itself as being in portrait mode, with a 768-px-wide viewport from the standpoint of CSS3 media queries.

I have built a couple of minimal-test-case apps to reproduce this bug/feature. It is not present when the web view is in a view controller that is the root view of the window. It is also not present if the split view controller is inside a tab bar controller. You can even place the web-view-bearing view controller inside a tab bar controller inside the detail pane of the split view controller and avoid this bug.

However, I would like to simply have a split view controller that is the root view of the window and includes a detail view controller that nonetheless properly honors media queries. Does anyone know of a way to achieve this?

I've tried:

• overriding the detail view controller's parentViewController property (returning nil)
• overriding the detail view controller's splitViewController property (ditto)
• overriding the detail view controller's didRotateToInterfaceOrientation method
• overriding the detail view controller's willRotateToIntefaceOrientation method

I'm investigating:

• using a different media query
• using a third-party split-view replacement (e.g. MGSplitViewController)
• manually injecting the appropriate stylesheet with JavaScript

If anyone has run into this issue and figured out a solution, please let me know.

Answer 1

It turns out that it's not the split view controller per se (or the tab bar controller, for that matter) that's causing the portrait/landscape mixup.

Basically if a UIWebView is taller than it is wide, the OS considers it in portrait mode, and if it's wider than it is tall, the OS considers it in landscape mode.

The presence of a tab bar controller was enough to make the height (768 - 20 - 49 = 699) just smaller than the width (1024 - 320 - 1 (gutter) = 703).