iOS 9 iPad Multitasking and iOS Safari

One of the new iOS features announced at last week’s WWDC was split-screen multitasking for iPad. I was curious to see how web content worked in the multitask views so I spent some in the iOS Simulator and thought I’d share a few observations.

App window sizes

If you watch the WWDC 2015 videos, a common refrain across the sessions is the importance of embracing Adaptivity (for native apps) and Responsive Design (for web). One of the reasons: iPad Multitasking introduces 5 new app screen sizes—6 if you include the Picture in Picture view.

For websites using Responsive Design correctly, this doesn’t really change anything. Everything will render fine. That said, this 400px-600px breakpoint range can be a little awkward and I suspect it’s the range that often gets the least design attention. So for some it may be worth taking a second look.

You’ll notice that the 320px width is the familiar pre-iPhone 6 mobile width. This, of course, isn’t an accident. The split-screen window sizes map to iOS Regular and Compact size classes.

Resizing without reloading

The classic “is it Responsive?” test is resizing your browser window and seeing if things break. The joke is that real users generally don’t do this sort of resizing and, aside from orientation change, it wasn’t even possible on mobile and tablet devices. So you could make a reasonable argument to not worry about window resizing and instead just establish the screen size context on page load.

iPad multitasking puts a wrinkle in this strategy since app window resizing doesn’t reload the page. So to achieve full compatibility you’ll need to pay attention to resize events to reinitialize context as necessary.

Testing with the iOS Simulator, resize events fire as expected, with one exception: when Safari transitions from off screen to the Slide Over state, resize events are fired at 768px, then 1024px, before firing at 320px (the sequence is the same in both Portrait and Landscape). It seems the app is rendered in the background at full screen sizes before getting resized down.

Page Visibility

In the Simulator the Page Visibility API works as expected. One minor thing to note is that when Safari is the primary app and a secondary app is brought into the Slide Over view, the visibility state remains as visible. It only changes to hidden when Safari is fully off screen.

Detecting when your site is viewed in multitask mode

Knowing when and how often your site is viewed in multitask mode might be interesting. It’d be cool if we had an event for this but in the mean time we can infer it by listening for resize events and checking some conditions.

This is a little premature but for fun I wrote a small script that solves some of the quirkier parts. It detects when a webpage is brought into multitask mode and fires callbacks with load, enter, exit, and resize events.

Developer tools

Lastly, the new version of Safari will include a Responsive Design Mode that lets you test out these different multitask views.