Related to issue #685 in EPUB Revision

I now get why Liza Daily “couldn’t reliably target landscape mode with lower-width media queries”, why Derrick noted “this may or may not actually work with a media query” and why it went unnoticed in your Medium article.

To sum things up, iBooks has one viewport for content starting on the right page/ending on the left page but has another for content displayed on a spread (two-up). So, technically, it doesn’t have distinct portrait viewports, it just follows the Media Query spec to the letter—there is nothing provided for the width of columns.

This can lead to serious issues if you’re using media queries to change your type scale or, even worse, your global font-size e.g. contents missing at the end of your xhtml file because pagination is computed using the page width (starting on the right) while content is styled using the spread width.

In other words, you’d better design your CSS for this case and actually use two media queries (one to target a page/column and another one to target the spread/columns in landscape). Problem is a lot of other iOS apps don’t fake a spread like iBooks and will use styles declared in this second media query.

For your information, after checking my Apple Bug Reporter, I reported this behavior on 13 November 2014 (iOS 8). It’s gone unaddressed since. As a matter of fact, I guess it is kind of spec-compliant (media queries) and we’ve just got an edge case that happens to be part of our “standard”.

[Edit] In case that’s unclear, here is an image illustrating iBooks’ behavior: