Search code examples
ioscssmobile-safariios6media-queries

Detect Mobile Safari full-screen mode using media queries

iOS6 introduced a new full-screen mode for Mobile Safari. It is only available in landscape orientation and hides the browsers top and button bar, as well as the devices status bar.

How is it possible to detect the new mode using media queries? I tried using the width media query, but couldn't get it to work.

I was able to differentiate them using JS document.documentElement.clientHeight, which returns 208 on default and 320 on full-screen mode.

Btw: I'm not talking about starting the app from the home screen, which is a different kind of full-screen mode.

Solution

  • So, height is 320px, orientation is landscape. Here's the media query:

    @media only screen and (height : 320px) and (orientation : landscape) {
    /* rules here */
}